What is better in speed and reliability, to store the font in my project (say in Styles folder) or to link to a font from Google?
ie
@font-face {
font-family: 'myfont';
src: url(gothic.ttf);
}
body {
font-family: myfont;
}
or
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
body {
font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif;
}
2024 Edit
Resource Caching across domains has long-since been disabled in most browsers, as it presented a way to track users. More information...
Advantages to storing them on your own server:#
- You can use any font you have.
- You are not reliant on any other site. If google fonts was temporarily down, your site would be unaffected.
- Sometimes, google fonts will be unable to load if on an intranet. Self hosted ones can be loaded if the site is being loaded.
Advantages to Google Fonts#
- Google's fonts are compressed, so load quicker, as said in another answer.
- **[See above edit] **(Perhaps the most important factor here) Google fonts are cached. This means that there is a relatively high chance that it has already been cached on your visitors computer, as there is a high chance that that same font has been used on another website, therefore it reduces page load time. **
- Google is a massive website and google fonts are massively used, so the chance of it going down are pretty low, compared to most other similar services.
- Google webfonts serve different fonts depending on which device is being used to access it. This means that you will have fewer compatibility issues, and you will need to store less fonts on you server (If you stored it on your own server, you would need to have many formats of the same font).
On the whole, I generally prefer to use Google fonts where I can, but of course there's nothing wrong with using fonts stored on your own server.