5 ms·

using font files from a popular public cdn like google fonts is a good idea as they are generally highly available and are generally already cached on the user'

by kbar13 12y ago

using font files from a popular public cdn like google fonts is a good idea as they are generally highly available and are generally already cached on the user's machine from use on other sites.

Nux 12y ago
Kbar, why do you need "highly available" fonts when you can bundle them in your web site? If the web site is up, fonts will work, if not fonts won't be needed anyway. Regarding caching, anyone knows how browsers cache content? I.e. if I host my own fonts and someone visits me, then visits another web site with same fonts.. are they retrieved from the cache or downloaded yet again? I'm guessing they are downloaded again which is unfortunate..
- pyre 12y ago
  Safari doesn't deal well with web-loaded fonts. I have seen Safari load corrupted webfonts from cache even when turning on "Don't Use Cache for Anything" in the Developer Tools menu. ... so there's always that.
- tschuy 12y ago
  > I'm guessing they are downloaded again which is unfortunate.. Which is exactly the reason to use a web font CDN like Google Fonts. I have Open Sans on my computer, and I'll redownload it again in a year when the cache expires. If each Wordpress blog started including their own copy, I'd have to redownload it each time.
- lallysingh 12y ago
  AFAIK, the fonts are hosted as regular URLs with cache policies specified in HTTP headers. So, if you host your own fonts, and someone visits your site and someone else's site with the same fonts, they will download it twice (unless the other site's referring to your site in the URL). The browser doesn't know that they're the same font until after it downloads it (twice).
  - walterbell 12y ago
    Fonts are a small subset of a site that makes a conscious decision to use a third-party font. There are many other resources being downloaded, which may or may not be duplicated. If the sites are revisited, they will be cached.
- GeneralMayhem 12y ago
  If they're not being loaded from the same url (e.g. from Google), then they're not the same fonts as far as the browser can tell.
a3_nm 12y ago
It's a pity that there isn't currently a way to leverage cached resources with different URLs for the same content. In fact this would not be hard: if you could indicate, with the resource URL, the hash of the resource content, the browser could just use the resource with that hash if it has it in cache (no matter from which URL), and otherwise retrieve it, check the hash, and add it to the cache.
- kbar13 12y ago
  to be fair, what happens if there's a hash collision?
  - a3_nm 12y ago
    Use a cryptographic hash function, and there will be no collisions. There are a lot of things that rely on the assumption that hash collisions do not happen.
Throwaway90283 12y ago
Keep in mind the Google CDN is blocked in countries such as China, so your web fonts are not going to render for those visitors, and if you rely on jQuery from the Google CDN, those visitors will experience a broken site. If you have a global reach, this is one reason to self host.
- cozuya 12y ago
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <script> window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>'); </script> This has to be pretty standard in 2015 right?
  - detaro 12y ago
    This still has to time out on the first request to trigger, right?
    - acdha 12y ago
      Yes – you could do something creative with async scripts but then you're transferring too much data for everyone to benefit only the subset of users who experience failures on the first script.
- acdha 12y ago
  Interestingly, that's true for scripts but it's not for webfonts because @font-face allows multiple sources, including local system fonts, and the browser will keep trying until it finds one which works. Here's a test page: http://chris.improbable.org/experiments/browser/webfonts/webfont-failover.css http://chris.improbable.org/experiments/browser/webfonts/web... You can see that it first gets a 404 before continuing on to a URL which works: http://www.webpagetest.org/result/150221_J4_43K/1/details/ http://www.webpagetest.org/result/150221_J4_43K/1/details/
- oxplot 12y ago
  Steve Souders from Google goes through dealing with this [1] and I was surprised to see how Twitter approached this (basically encouraging putting sync javascript link at the top of the page) [1]: https://www.youtube.com/watch?v=aHDNmTpqi7w https://www.youtube.com/watch?v=aHDNmTpqi7w

by kbar13 12y ago

using font files from a popular public cdn like google fonts is a good idea as they are generally highly available and are generally already cached on the user's machine from use on other sites.

Nux 12y ago

Kbar, why do you need "highly available" fonts when you can bundle them in your web site? If the web site is up, fonts will work, if not fonts won't be needed anyway. Regarding caching, anyone knows how browsers cache content? I.e. if I host my own fonts and someone visits me, then visits another web site with same fonts.. are they retrieved from the cache or downloaded yet again? I'm guessing they are downloaded again which is unfortunate..

pyre 12y ago
Safari doesn't deal well with web-loaded fonts. I have seen Safari load corrupted webfonts from cache even when turning on "Don't Use Cache for Anything" in the Developer Tools menu. ... so there's always that.
tschuy 12y ago
> I'm guessing they are downloaded again which is unfortunate.. Which is exactly the reason to use a web font CDN like Google Fonts. I have Open Sans on my computer, and I'll redownload it again in a year when the cache expires. If each Wordpress blog started including their own copy, I'd have to redownload it each time.
lallysingh 12y ago
AFAIK, the fonts are hosted as regular URLs with cache policies specified in HTTP headers. So, if you host your own fonts, and someone visits your site and someone else's site with the same fonts, they will download it twice (unless the other site's referring to your site in the URL). The browser doesn't know that they're the same font until after it downloads it (twice).
- walterbell 12y ago
  Fonts are a small subset of a site that makes a conscious decision to use a third-party font. There are many other resources being downloaded, which may or may not be duplicated. If the sites are revisited, they will be cached.
GeneralMayhem 12y ago
If they're not being loaded from the same url (e.g. from Google), then they're not the same fonts as far as the browser can tell.

a3_nm 12y ago

It's a pity that there isn't currently a way to leverage cached resources with different URLs for the same content. In fact this would not be hard: if you could indicate, with the resource URL, the hash of the resource content, the browser could just use the resource with that hash if it has it in cache (no matter from which URL), and otherwise retrieve it, check the hash, and add it to the cache.

kbar13 12y ago
to be fair, what happens if there's a hash collision?
- a3_nm 12y ago
  Use a cryptographic hash function, and there will be no collisions. There are a lot of things that rely on the assumption that hash collisions do not happen.

Throwaway90283 12y ago

Keep in mind the Google CDN is blocked in countries such as China, so your web fonts are not going to render for those visitors, and if you rely on jQuery from the Google CDN, those visitors will experience a broken site. If you have a global reach, this is one reason to self host.

cozuya 12y ago
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <script> window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>'); </script> This has to be pretty standard in 2015 right?
- detaro 12y ago
  This still has to time out on the first request to trigger, right?
  - acdha 12y ago
    Yes – you could do something creative with async scripts but then you're transferring too much data for everyone to benefit only the subset of users who experience failures on the first script.
acdha 12y ago
Interestingly, that's true for scripts but it's not for webfonts because @font-face allows multiple sources, including local system fonts, and the browser will keep trying until it finds one which works. Here's a test page: http://chris.improbable.org/experiments/browser/webfonts/webfont-failover.css http://chris.improbable.org/experiments/browser/webfonts/web... You can see that it first gets a 404 before continuing on to a URL which works: http://www.webpagetest.org/result/150221_J4_43K/1/details/ http://www.webpagetest.org/result/150221_J4_43K/1/details/
oxplot 12y ago
Steve Souders from Google goes through dealing with this [1] and I was surprised to see how Twitter approached this (basically encouraging putting sync javascript link at the top of the page) [1]: https://www.youtube.com/watch?v=aHDNmTpqi7w https://www.youtube.com/watch?v=aHDNmTpqi7w