Search code examples
htmlcssfontsfont-face

Google Font as substitute font-family not working

Here is my problem, I need to set fonts like this:

font-family: 'Century Gothic', Helvetica, Dosis;

Dosis is font from Google Fonts library. I need that, Century Gothic is MS Font, installed with Office (until 2010), Helvetiva - you all know. So I need third choice.

When I put Dosis in first position it works of course. Second or third position gives me Arial.

I tried loading this font by @import in CSS and in header. Both doesn't work.

Google Chrome inspector

As you can see, it all looks just fine, but Rendered font is Arial (why?!). I was thinking about that: Dosis is not loaded at all. But why isn't?

PS. @import and of course are before that css lines with font-family.

Anybody?

// I tried:

font-family: Helvetica, Dosis;

Gives me Arial.

font-family: 'Century Gothic', Dosis;

Worked! I've got Dosis.

Now I really don't understand how it works.

Solution

  • Dosis has nothing to do with this (Just to clear things out), It is Helvetica. In Google Chrome Helvetica is rendered with Arial which FYI is the default font for sans-serif for Google Chrome in Windows.
    Src: http://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults/
    But that has nothing much to do either.

    All the unrecognized fonts will be rendered with the default Standard font which most of the time is Times New Roman. (Except, of course Helvetica)
    Since Helvetica is metrically identical to Arial meaning each character's width in both Helvetica and Arial is exactly same, it is rendered as Arial which helps in displaying and printing text correctly.
    All others are rendered to the Standard font, Times New Roman.