Search code examples
htmlcssgoogle-fonts

Some Google Fonts Not Importing to CSS on Windows

I'm trying to use Open Sans on a website I'm designing using google font's css import. I've been testing the website on a mac and so only now am trying to use a backup font for windows that doesn't come with Helvetica Neue. To do this, I'm using google font's import link for Open Sans as follows:

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

For whatever reason, this works just fine on my mac (tested in firefox and chrome) but it just does not seem to want to load on my windows desktop (tested in firefox and edge). To make matters even more confusing, I've also imported DM Sans using the same method and have had no troubles (DM Sans import line below)!

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

I've tried using a combined DM Sans and Open Sans import line and html as generated by google fonts but that has also been no good (DM Sans Still works fine in that case). I've also tried removing the https start to the link but this was unfruitful and doesn't make sense to me since the DM Sans link does work.

Any ideas what's going on here? I've honestly been pulling my hair out.

In case it helps, here's my full css font-family fallback list for both the Open Sans (header) font and my DM Sans (body) font respectively.

font-family: "Helvetica Neue", HelveticaNeue, Helvetica, "Open Sans", Arial, sans-serif;

font-family: 'DM Sans', Helvetica, Arial, sans-serif;
Solution

  • Font-family name "Helvetica" acts as an alias for "Arial" on windows

    While Windows and Apple Operating systems share a lot of "core fonts" – and pretty much any Apple OS comes with a preinstalled "Helvetica" (or "Helvetica Neue" etc.) – it is usually not included on Windows.

    Trivia: MS invested a lot in further development/extension of the "Arial" (additional language support, truetype hinting optimisations etc.) – that's probably the main reason why they implemented this replacement logic which became standard.

    Better avoid any local font dependencies completely if you want to achieve a consistent rendering across all browsers.

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800');
@import url('https://fonts.cdnfonts.com/css/tex-gyre-heros');

/* family name mapped to local fonts */
@font-face{
  font-family: "Helvetica Neue";
  src: local('HelveticaNeueLTStd-Roman')
}


body{
  font-size:6vmin;
}

/* won't work as "helvetica" works as an Arial alias */
.useLocalHelvetica{
  font-family:  Helvetica, "Open Sans", Arial, sans-serif;
}

.useLocalHelvetica2{
  font-family: "Helvetica Neue", HelveticaNeue, "Open Sans", Arial, sans-serif;
}

/* works: first 2 fonts don't exist - switch to "Open Sans" */
.useWebfonts{
  font-family: notExistentSans, notExistentSans2, "Open Sans", Arial, sans-serif;
}

.useLocalHelveticaLookalike{
  font-family: 'TeXGyreHeros', sans-serif;
}
    <p class="useLocalHelvetica">Gta => Helvetica to Arial</p>
<p class="useLocalHelvetica2">Gta => local Helvetica</p>
<p class="useLocalHelveticaLookalike">Gta => lookalike Tex Gyre Hero</p>
<p class="useWebfonts">Gta => Open Sans</p>

    helvetica vs Arial

    The first example will render "Arial" on windows even if you have some version of Helvetica installed.

    You may play around with @font-face rules and local() and include any possible font name as used by your OS (and the thousands available Helvetica versions) – Frankly, rather a waste of time.

    As you can see from the 3. example the src stack actually works and takes the first available font (in case the previous ones couldn't be retrieved)

    I recommend to rely on proper webfont references only. For instance you could load a helvetica-lookalike like "Tex Gyre Hero".