Problem: I’m trying to get a Google variable font to work (I’m okay with the non-variable ones).
I am new to the mysterious world of Google fonts, and it seems there are a lot of opinions out there on how they should be implemented.
Per suggestions around in the interwebs, if I enter this in my browser to test my <link> tab in my <head>:
https://fonts.googleapis.com/css2?family=Roboto+Flex:slnt,wdth,[email protected],25..150,200..700&display=swap
and I get a bunch of these:
/* latin-ext */
@font-face {
font-family: 'Roboto Flex';
font-style: oblique 0deg 10deg;
font-weight: 200 700;
font-stretch: 25% 150%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/robotoflex/v26/NaNeepOXO_NexZs0b5Qrz. . ..woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, . . . U+1E00-1E9F;
}
I thought those were to go at the top of my .css file. But it doesn’t seem to make any difference. In fact, even if I leave it out for the non-variable fonts, as long as my <link> tag checks out, they work fine.
The variable font does not. Here’s my .css:
font-family: "Roboto Flex", Arial;
font-weight: 400;
font-stretch: 150%;
What am I not getting?