Search code examples
cssruby-on-railscachinggoogle-font-api

Rails Google Font Cache

I have a rails application using Bootstrap and SASS and I use google fonts.

I load my fonts with import in my css file:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

But when I check the Network Requests in Safari, it always says that my font is not loading from cache.

I already tried to add WebFonts to my application holping that it will cache the fonts for me, but didn't worked.

Someone knows how to properly cache the fonts?

Thanks in advance

Solution

  • Font should cache and so should Google fonts do. See also; https://developers.google.com/fonts/faq#Performance:

    If a page uses web fonts, then the font files have to be downloaded to the site visitor's computer before they can be displayed initially. The font files are served compressed for a faster download. After that initial download, they will be cached in the browser. As the Google Fonts API becomes widely used, your visitors will be likely to already have the font you're using in their browser cache when they visit your page

    You should notice that SASS compiles @import url() into exactly @import url() so your sass code results in a "normal" css import. The above also makes clear that your issue is not related to Sass (or neither to Rails) at all.

    CSS @imports with url() use a HTTP request to load CSS code from a external source into your CSS code.

    So in your situation https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,80 does not hold your font, but this URI only returns some CSS code. This CSS code contains the @font-face declarations for your fonts.

    Google prevents the requests to fonts.googleapis.com from caching. The @font-face declarations in these results also contain url() request which point to the font files. For instance: src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');

    (the @import create a HTTP request with a max-age=0 header (see : What's the difference between Cache-Control: max-age=0 and no-cache?) and Google does not respond with a Not Modified header.

    The font files from fonts.gstatic.com should be cached.

    If your issue is about the CSS code from fonts.googleapis.com is NOT caching, then you are right. But you should also wonder if it is a real issue. On the other hand when your issue is about the font files from fonts.gstatic.com are not caching then i expect your browser settings prevent the caching.

    When you want to disable the HTTP request to fonts.googleapis.com which can not be cached, you should not use the @import, but directly put the @font-face declarations in your Sass code. (You can find these declarations by opening https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,80 in your browsers). Notice that the preceding will break downloading of the font files when their location on fonts.gstatic.com change. Also can Google use the CSS code from fonts.googleapis.com to point the user to the fastest location (for instance based on location) to download the fonts file (when not cached already).