5

I'm at a loss here. Trying to add a google variable webfont (open sans) to my website.

  1. When selecting the font, google only creates the <link> for static CSS font-faces. WHY? (semicolons, no '300..700')

Use on the web

To embed a font, copy the code into the of your html

[x] <link>    [ ] @import
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

CSS rules to specify families

font-family: 'Open Sans', sans-serif;
  1. On the entire page there is nowhere a download for the woff2 (which only comes from the API). The D/L button ONLY serves the .ttf. Ironically in the article about self hosting, they use woff2 as example, even if they don't provide it. Also even the official GITHUB page for the font only serves .ttf. WHY?

  2. Ohter sources provide static files in various formats (but I didn't see variable ones there) and ppl in another thread even posted their own tools like:

  1. After a full day, I finally found this. There another (official) tool is mentioned, for converting ttf to woff2, which seems not easily accomplishable for variable fonts. SRSLY? Is this the only way ?? And why is there no documentation whatsoever ?? (Ok Maybe I should grab the woff2 from the API, but I noticed differences across browsers, I think for example Opera gets serves only the static type not the variable one.)

  2. The 'good' API serves this. But it only uses format('woff2'):

But I've read, for variable fonts the syntax should be more like this, using format('woff2 supports variations') and format('woff2-variations') and @supports (font-variation-settings: normal). WHY Google doesn't use that syntax? Which is better now?

Google:

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

How it supposedly should be done:

@font-face {
    font-family: Asap;
    src: url('/fonts/Asap-VariableFont_wght.woff2') format('woff2 supports variations'),
         url('/fonts/Asap-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
    font-style: normal;
}

Side note: From the google page I needed to manually change

    https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..0,800;1,300..1,800&display=swap

to

https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap

to even get the variable font.

somedotnetguy
  • 557
  • 2
  • 14
  • Google Fonts has a [presence on github](https://github.com/googlefonts). Perhaps their issues tracker is a more appropriate place to ask why. – Ouroborus Sep 06 '22 at 16:25

0 Answers0