Google fonts external CSS Vs copying the code of external css in my css?

Question

I'm using a google font by adding a External link

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

This CSS only having this code

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: normal;
  src: local('Arvo'), url('http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff') format('woff');
}

Can i just paste and use this code in my project css file style.css or it's necessary and better use it as a google's external css link

Answer 1

You should link it from Google, because:

• Google serves a different CSS file depending on the browser that's making the request.
• If Google ever decides to make changes to that CSS (such as changing the font filename!), the update will be automatic on your site.

So, it's more robust to link it from Google.

---

If you want to host the font locally, read this: How to host google web fonts on my own server?

Answer 2

I imagine the only problem would be if Google decide to change the font location from 'http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff' to 'http://themes.googleusercontent.com/static/fonts/arvo/v3/somethingelse.woff'.

By using their link they will likely keep that up to date. Basically what I am trying to say is they are less likely to change the link 'http://fonts.googleapis.com/css?family=Arvo' but are more likely to change 'http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff'. I'd probably stick with their external link, the only downside would be a tiny tiny tiny tiny difference in your page load time as it has to download the CSS and then the font. But Google has so many servers that are so fast it iwon't make a blind bit of difference. Hope that made sense. That's my view on it as well, someone else might have another idea.

Answer 3

I would just include it to my project css file because:

• you can save one http request :)
• full control about your css

If google ever changes the external css file, maybe your project goes crazy. But this may depend on the Project. In most cases it does not matter if the user has the file already cached or not. If you have only a small site the chance the user has this file allready chached tends to zero. Just my 2 cents…