Search code examples
javascriptcssgoogle-font-api

Google fonts load ignored when font exists locally


I am loading 'Nothing you could do' from google fonts which works perfectly in all browsers. However, if I have the font installed on my machine already it uses that instead of the Google one. There are several issues with that, one is that a class with font-size: 1.45em; appears way bigger if the font is loaded from the local machine.

I realise that the percentage of people having the font installed would be minimal but still I am just wondering if there is a way to always force a load from Google?

jsFiddle


Solution

  • Well, if you look at the snippet behind the URL Google gives you to use, it reads (for me -- it appears Google does browser sniffing to not serve Firefox IE-specific workarounds etc):

    @font-face {
      font-family: 'Nothing You Could Do';
      font-style: normal;
      font-weight: 400;
      src: local('Nothing You Could Do'), 
           local('NothingYouCouldDo'), 
           url(http://themes.googleusercontent.com/static/fonts/no...YU.woff) format('woff');
    }
    

    Lose the two local bits and host the CSS yourself, you should be better.