11

I'm using the Ubuntu font from Google Fonts:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />

My stylesheet:

body {
    font-family: 'ubuntu',arial;
}

It works, but if install a font with the same name (Ubuntu), it overrides the one from Google Fonts.

Is it possible to force the browser to use the one from Google Fonts?

Dan D.
  • 73,243
  • 15
  • 104
  • 123
Martin
  • 2,302
  • 2
  • 30
  • 42

1 Answers1

12

The answer lies not in your code, but in Google's.

Here's part of the CSS you are requesting:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: bold;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}

Key line here is local('Ubuntu Bold'), which asks to load local file if possible. The simplest solution is to copy all the Google's CSS, paste it in your own CSS, and modify this local name to be, for example, local('Ubuntu Bold NonExisting Name or Something Else'). Such font does not exist and will not replace font loaded by CSS.

P.S. I have not tested this myself. If 0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff URL is expiring, then you are in a tough spot. Try to see font's licence and consider hosting the font yourself, if preventing local override is a priority.

Jonas Lekevicius
  • 791
  • 1
  • 6
  • 9
  • 4
    Why change it to `local('Something Nonexistant')`? Why not just remove the locals so it's only `url('whatever')`? – Matt Grande Feb 23 '12 at 20:05
  • 3
    This technique (specifying non-existant font name) was the basis for 'Smiley' method. Later, UTF-8 character usage caused some bugs with Android, so that method is no longer recommended. But I assume, there was a reason for this hack. Possibly, some browser tried to detect and load local font anyway. However, it would be a good idea to try without `local()` and see if it works in every browser. It may. – Jonas Lekevicius Feb 23 '12 at 20:12
  • Thank you. It seems to work. I'll do some more testing tomorrow and update this question. I left out the local parts like Matt suggested. – Martin Feb 23 '12 at 20:18
  • To prevent local fonts from being used even without the local declaration, you should slightly alter the name of your font with a prefix or suffix (like font-family:"{myfont} web"). Otherwise some browsers still attempt to use them. – RobW Nov 14 '12 at 23:03
  • 2
    Sorry, but I don't think this is a good solution. The Fonts API returns different fonts for different clients — see [What is the Google Fonts API serving?](https://developers.google.com/fonts/docs/technical_considerations#Serving). If you just copy the code the request from your browser generated, the result is "optimized" for your browser, but your browser only. – Kariem Jun 18 '13 at 07:59
  • 4
    With some fonts, especially Oswald, prioritizing the local font over the web font is annoyingly problematic. I wish Google Fonts had a URL variable that would allow us to disable the local font altogether, but since that's not yet a possibility, copying their CSS and removing the local rules is the only solution. However, it's important to note that Google serves up custom CSS to specific browsers, so if copying their CSS you will want to make sure you hit their CSS url in different versions of every browser, and merge the results! – purefusion Mar 06 '14 at 18:02
  • 1
    **! Warning !** Copying Google's stylesheet to your own codebase can break more then it does good. Google alters the stylesheet for specific browsers, when a Firefox browser requests the CSS, Google will present an entirely different stylesheet which contains different font files. – Ambidex Jun 29 '15 at 15:05