Best IT Recipes

Google Fonts Not Displaying in Google Chrome

I am creating a new WordPress theme (I don’t know if this is relevant), and there is this problem that continues to listen to me.

I downloaded Roboto Slab from Google Webfonts (including CSS in the <head> section). On every other browser, the font displays OK, except for Google Chrome. When I first load a website into Google Chrome, texts using this custom font are NOT displayed in ALL (even in the Georgia font stack as a reserve - "Roboto Slab", Georgia, serif; ). After I visit the style link or restart any CSS property in the Inspector, the texts will become visible.

Since I started the topic a while ago, I can clearly remember that it worked great before. Is this a known recent Chrome update bug?

First boot : screenshot # 1

After I reapplied some CSS properties, enter the responsive view or hover : screenshot # 2

Does anyone have similar problems? How can I continue this?

Thank!

+59
html css google-chrome google-webfonts
Feb 25 '14 at 10:20
source share
15 answers

This seems to be a known Chrome bug . Only css workaround is used there, which should solve the problem:

 body { -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @-webkit-keyframes fontfix { from { opacity: 1; } to { opacity: 1; } }

Chrome seems to just need to repaint the text

+85
Feb 25 '14 at 20:46
source share

CSS fix doesn't work for me, also 0.5 second delay of script seems uncomfortable.

This JS snippet seems to work for us:

 <script type="text/javascript"> jQuery(function($) { if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) { $('body').css('opacity', '1.0') } }) </script>
+8
Mar 25 '14 at 14:30
source share

If css fix doesn't work for you

In case the first message rating does not work, here is the solution:

delete 'http:' in:

 <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>

or

 @import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

As explained by David Bain , most modern browsers do not actually require you to specify a protocol; they will “output” the protocol based on the context from which you named it

+7
Dec 09 '14 at 16:10
source share

Tried css fix above without success. Finally, allowing the creation of a stylesheet (chrome.css) containing:

 body { -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @@-webkit-keyframes fontfix { from { opacity: 1; } to { opacity: 1; } }

And loading it into jquery at the bottom of the page:

 <script type="text/javascript"> $(document).ready(function () { $('head').append('<link href="/chrome.css" rel="stylesheet" />'); }); </script>
+6
Apr 04 '14 at 9:24
source share

I included the above CSS ... but I also included the following javascript in my header:

(Note, I know that I did not configure the fonts in the code below. But despite this, it still seems to help get Chrome to redraw the fonts on the page ... just make sure your fonts are correctly specified elsewhere)

With the CSS mentioned above, used in conjunction with the code below included in mine ... in the worst case, all fonts on my page will display after a second or so of delay.

Hope this helps people. Greetings.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { $('body').hide().show(); }); </script> <script type="text/javascript"> //JavaScript goes here WebFontConfig = { google: { families: ['FontOne', 'FontTwo'] }, fontinactive: function (fontFamily, fontDescription) { //Something went wrong! Let load our local fonts. WebFontConfig = { custom: { families: ['FontOne', 'FontTwo'], urls: ['font-one.css', 'font-two.css'] } }; loadFonts(); } }; function loadFonts() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); } (function () { //Once document is ready, load the fonts. loadFonts(); })(); </script>

Here where I found above: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

+2
Mar 02 '14 at 19:37
source share

I fixed it with a JS solution, but also had to use the latest jQuery hosted on google (1.11) to commit it.

+1
Apr 01 '14 at 0:30
source share

I ran into the same problem. This was due to HTTP / S protocol mismatch, as described here .

Use the https version of the URL.

+1
Sep 20 '15 at 21:19
source share

This is not a real solution, but it works better for me than anything else in this thread. I changed the font. I had Fira Sens, and now I just switched to Roboto, which works out of the box.

0
Jun 04 '15 at 17:34
source share

I just used to remove the roboto font from my window fonts, and now everything works.

possibly because you have an older version of the font on your system. I think.

0
Sep 21 '15 at 18:06
source share

I tried to work with Meg-answer, but, like many others, this also did not work for me.

To use Google Font found this trick [Adding screenshots for steps].

1) Just take the url from css or the standard link as highlighted.

2) Open the link in another tab, copy all the css code (i.e. font-face) into your css file and run it.

Not sure about performance since many HTTP calls are being added or just trying to copy a single font.

Image for step 1 enter image description here

Image for step 2 enter image description here

0
Oct 03 '15 at 20:31
source share

It is possible that the element has text-rendering: optimizeLegibility , which can cause this or similar problems. Changing this parameter to auto fixed this problem for me with the Foundation 5 project, which by default sets it optimizeLegibility .

0
Mar 18 '16 at 20:29
source share

See a similar issue in the Strange issue issue on Google Font Rendering .

The solution is to download the desired font (I my case "Fira Sans") from the Mozilla CDN instead of the Google CDN.

0
Apr 02 '16 at 9:11
source share

This may not be a silver bullet, but fix the problem on our site by moving the link to the css font version to the bottom of our pages, as well as the web link above.

-one
Apr 08 '14 at 16:42 on
source share

If people still have this problem, before trying to use all the great solutions, try using an important tag in your CSS to see if it fixes it, as it does for me, and I'm not sure if the error is similar to the old Chrome error .

 .faultyText {"Roboto Slab", Georgia, serif !important}
-one
Apr 22 '15 at 15:52
source share

Checkout plugin I made: https://chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok

It rebuilds the network using pure javascript, which causes the browser to redraw the entire page.

-3
Apr 10 '14 at 7:45
source share


More articles:


All Articles