Google's cache is not using my custom font

Question

When I check my site’s cache view on Google Search, I see Google does not use my custom font, it always replaces mine with Arial. Because of font widths, my whole design is changing.

I have these lines on my CSS file, and eveything is ok on desktop and mobile view:

@font-face {
font-family: 'helveticaneuelt_std_lt_cnRg';
src: url('http://www.example.com/css/helveticaneueltstd.eot');
src: url('http://www.example.com/css/helveticaneueltstd.eot?#iefix') format('embedded-opentype'),
url('http://www.example.com/css/helveticaneueltstd.svg') format('svg'),
     url('http://www.example.com/css/helveticaneueltstd.woff') format('woff'),
     url('http://www.example.com/css/helveticaneueltstd.ttf') format('truetype');
    font-weight: normal;
font-style: normal; }

Do you have any idea why Google’s cache system does not use my custom font?

Original site: goo.gl/0CCIc8
Cache view: goo.gl/7NR4E1

UPDATE: I found solution by using fonts with base64 mod.

Answer 1

It is normal for sites to look a little bit different in cache view. The cache usually tries to load resources from your server. This is problematic when:

• Users are using the cache because your site is down or slow
• Resources are not permitted by the browser to be loaded cross domain

The latter may be the problem with fonts. It sounds like you found a workaround by encoding the fonts using base64 in your CSS file.

Most webmasters don't worry much about how their site looks in the Google cache. Displaying badly in cache doesn't effect rankings. Only a small percentage of users actually view your site like that anyway.

Answer 2

I know it's an old question, but it's the first one in the Google search results. I've been searching for a solution and after some weeks of unsuccessfull testing, I could find the solution. Add this code in your .htaccess:

# Allow access from all domains for web fonts
<IfModule mod_headers.c>
  <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

The fact is, that the problem is not in the Google's side, indexing wrong. The problem is in the server side, about the following error:

Reason: CORS header 'Access-Control-Allow-Origin' missing

After editing the .htaccess file and clearing the browser's cache, the fonts are displayed again in the Google's cached pages, instantly!