Should I Locally Store CSS Generated by The Google Web Fonts API

Should I locally store CSS generated by the Google Web Fonts API?

The CSS served up by Google Webfonts changes depending on the user agent in the HTTP request header, so you'd be better off using @import. The reason is the different implementations of web fonts in different browsers.

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

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?

Server stored fonts vs Google fonts?

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.
(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.

Static CSS for Google fonts and serving them from your own website (and not from gstatic CDN)

TTF should be enough, but WOFF(2) could save load time where supported.

@font-face {
  font-family: 'font';
  src: url('/font.eot');
  src: url('/font.eot#iefix') format('embedded-opentype'),
       url('/font.woff2') format('woff2'),
       url('/font.woff') format('woff'),
       url('/font.ttf') format('truetype'),
       url('/font.svg#font') format('svg');
}

Webfonts or Locally loaded fonts?

First, I'll clear something up about Google's offering. It will actually load the smallest format your browser can handle. WOFF offers small file sizes, and your browser supports it, so it's the one you see. WOFF is also fairly widely supported. However, in Opera for example, you'll probably get the TrueType version of the font.

The file size logic is also, I believe, why Font Squirrel tries them in that order. But that is mostly speculation on my part.

If you're working in an environment where every request and byte counts, you'll have to do some profiling to find out which works best for your use case. Will people be only viewing one page, and never visiting again? If so, caching rules don't matter as much. If they're browsing or returning, Google might have better caching rules than your server. Is latency the bigger problem, or bandwidth? If latency, aim for fewer requests, so host it locally and combine files as much as possible. If bandwidth, go with whichever option ends up with the smallest code and smallest font format.

Now, on to the CSS vs JS consideration. Let's look at the following piece of HTML:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

In many cases, script1, style1, and style2 would be blocking. This means the browser can't continue displaying the document until that resource has loaded (although modern browsers fudge this a bit). Which can actually be a good thing, especially with stylesheets. It prevents a flash of unstyled content, and it also prevents the giant shift that would occur when applying the styles (and shifting content is really annoying as a user).

On the other hand, script2 wouldn't be blocking. It can be loaded later, and the browser can move on to parsing and displaying the rest of the document. So that can be beneficial too.

Specifically talking about fonts (and even more specifically, Google's offering), I would probably stick with a CSS method (I like @import because it keeps styling with the stylesheet, but that could be just me). The JS file loaded by the script (http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js) is larger than the @font-face declaration, and just looks like a lot more work. And I don't believe loading the actual font itself (the WOFF or TTF) is blocking, so it shouldn't delay things too much. I'm not personally a huge fan of CDNs, but the fact is that they're REALLY fast. Google's servers will beat most shared hosting plans by a landslide, and because their fonts are so popular, people might even have them cached already.

And that's all I've got.

I have no experience with Typekit, so I left it out of my theorizing. If there's any inaccuracies, not counting generalizations between browsers for arguments sake, please point them out.

(Google) Webfont only works locally

import fonts from https://... url

google font reference

@import url('https://fonts.googleapis.com/css?family=Lato|Roboto');p:first-child{font-family: 'Roboto';}p:last-child{font-family: 'Lato';}

<p>https://fonts.google.com<p><p>https://fonts.google.com<p>

Should I Locally Store CSS Generated by The Google Web Fonts API