5

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

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

3 Answers3

8

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?

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Thanks. Should I keep this google css after or before my style.css ? – Jitendra Vyas Aug 26 '11 at 11:29
  • 1
    @Jitendra Vyas: I've just tested this, and it turns out I was wrong about *the CSS* being cached. Google does not allow it to be cached (via an immediately expiring `Expires` header). Only the font file is cached. I've added a new consideration as the first bullet point. – thirtydot Aug 26 '11 at 12:45
  • @thirtdot- Thanks for testing and sharing conclusion with us. I f google serve different link for different browser then it's big reason to use google link. Thank you. – Jitendra Vyas Aug 26 '11 at 12:49
  • "...the update will be automatic on your site." Could be positive, could be negative :) In (bigger) Projects I never ever trust external file hostings. Once they are down or broken or ... your files are gone ;) – gearsdigital Aug 26 '11 at 13:09
  • @gearsdigital: Yes, that's definitely a point to consider. I tend to just implicitly trust Google with this sort of thing. – thirtydot Aug 26 '11 at 13:36
  • The `cache-control` header overrides the `expires` header, so your browser will cache Google's CSS... for 24 hours, according to the header I'm seeing now: `cache-control:private, max-age=86400, stale-while-revalidate=604800` – jabbett Feb 25 '16 at 15:03
4

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.

Rob Quincey
  • 2,834
  • 2
  • 38
  • 54
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…

gearsdigital
  • 13,915
  • 6
  • 44
  • 73