Google Chrome font has changed (4)
just noticed on several sites that the font awesome icons aren't showing in Google Chrome. The console displays the following error:
Thanks for any help/explanation!
This issue of accessing fonts - amazing assets has been a problem for many people without a comprehensive explanation and resolution to the problem.
What is CORS:
Copy Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to allow a user agent to access selected resources from a server in a different origin (domain) than that used in this moment website. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.
Problem:
The problem is related to the way the font-amazing fonts are loaded.
@font-face( font-family:"FontAwesome"; src:url("../fonts/fontawesome-webfont.eot?v=4.2.0"); src:url("../fonts/fontawesome-webfont .eot?#iefix&v=4.2.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"),url( "../fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format ("svg"); font-weight:normal; font-style:normal )
Fonts are loaded via style sheet (CSS). The situation we have here:
Solution:
Although CORS rules have been created in your file storage, such as S3, and access to the resource has been granted to the given domain, when the CDN tries to download the fonts specified in the CSS, the source/domain specified when downloading those fonts is from the CDN, but the CORS access not provided to the CDN domain.
Create a CORS rule for your CDN domain.
I'm using a CDN which doesn't allow me to modify its answer, so I modified font-awesome.min.css by replacing the relative path with an absolute path and it worked.
The problem is not with the CSS file, but with the way it works with the font file. The font-awesome.min.css file has lines like
@font-face(font-family:"FontAwesome"; src:url("../fonts/fontawesome-webfont.eot?v=4.2.0"); src:url("../fonts/fontawesome-webfont .eot?#iefix&v=4.2.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"),url( "../fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format ("svg"); font-weight:normal; font-style:normal)
which force the browser to request the corresponding font file (eot, woff, ttf or svg) from the same server as CSS file. This is logical and correct.
However, when the browser requests this font file from cdn.keywest.life, it reads the Access-Control-Allow-Origin header headers and doesn't find it, so it gives this error message. (This looks like a browser error to me because it comes from the same server as the CSS file).
Instead, when you use maxcdn.bootstrapcdn.com the response includes an Access-Control-Allow-Origin:* header and the browser accepts that font file. If your cdn server included this header, it will work too.
If you have an Apache server, see this answer: Font-awesome not rendering properly in Firefox / how to sell via CDN?
On this site I'm currently coding using webfonts that are stored on my server. Every browser renders them just fine, but chrome doesn't. Chrome uses Times New Roman instead. After checking the developer tools on chrome I found that they were requesting ARE fonts from the server and were being removed successfully. For some reason reason Chrome doesn't use them. I noticed that if I install fonts on my computer (using Windows, BTW), it suddenly starts working with chrome.
Here's my reading of the font:
@font-face ( font-family: "BNLunch"; src: url("BN_Lunch.eot"); src: url("BN_Lunch.eot?#iefix") format("embedded-opentype"), url("BN_Lunch .woff") format("woff"), url("BN_Lunch.ttf") format("truetype"), url("BN_Lunch.svg#BNLunchregular") format("svg"); font-weight: normal; font -style: normal; )
Any ideas?
EDIT: I forgot to mention that this particular CSS works with other fonts. Only this particular font and BNMadregot are giving me problems. Maybe it's because the English letters of this font are empty?
02 answers
The font is broken (as FontSquirrel told you). Don't use it. I downloaded BN Lunch from the site you mentioned and processed it using font-face-generator.com, and the test.html page it generated doesn't display the characters in that font (and yes, I tried plain numbers too and Hebrew letters) Chrome or in Firefox, only in IE (tested on Win 7). Chrome dev tools show that Chrome is receiving font files and not signaling errors, so internal font tables appear to be broken (eg incorrect character coverage information). The site that distributes it looks suspiciously like one of many illegal font distribution sites; for example, no mention is made of the authors or copyright of the fonts.
So, get another font.
I have similar CSS code that works fine in every browser, even Chrome.
@font-face ( font-family: "standard 07_58"; src: url("../fonts/standard_07_58/stan0758.eot?") format("eot"), url("../fonts/standard_07_58/stan0758 .woff") format("woff"), url("../fonts/standard_07_58/stan0758.ttf") format("truetype"), url("../fonts/standard_07_58/stan0758.svg#Standard0758") format("svg"); font-weight: normal; font-style: normal; )
There are some differences from your CSS, so try following this pattern and see what happens.
Based on test installation Google browser Chrome Canary on a new Windows PC revealed broken fonts, both in the interface of the browser itself and on the sites that opened in it.
It's no secret that rendering is far from always ideal, but we did not expect such an occurrence on this particular machine, since Chrome versions Stable has never seen anything like this.
But I had to...
You can see what the mentioned problem looked like externally in the screenshot below. We made the upper part immediately after installation , and the lower one - after the bug is fixed. And please note, this is the settings menu page (the so-called chrome://flags page).
Of course, we also assumed that one of the reasons for this phenomenon could be that Canary is the newest version of the browser, and perhaps something is still being finalized and remade in it that is not yet even in the Stable version of Chrome.
However, further reflection led to the idea that this problem can also be successfully created by the computer’s own hardware and/or drivers installed on it. In addition, an incidental “Googling” of information on the topic showed that similar questions have periodically arisen among users since the time Chrome 3.
And the methods used to eliminate the bug were also very different, in particular disabling or DirectWrite, launch Chrome with different starting parameters, etc. Almost all of them are years old, of course, and are no longer relevant for the latest versions of the browser. But some of the “classics,” as it turned out, have not lost their former effectiveness. So,..
what to do if broken fonts appear in Google Chrome Canary:
- go to " Settings " (through chrome://settings/ or via " Menu«);
- Scroll to the bottom of the page and click “ Additional «;
- then scroll the page again to the section “ System«;
- and in it we disable the function “ Use hardware acceleration (if available) «;
- restart Chrome.
After that, broken fonts “corrected” themselves. But it is also worth noting that disabling the hardware acceleration function in this particular situation should be perceived as the lesser of two evils, since this can negatively affect the browser's performance in a number of cases (more precisely, when performing certain tasks). However, you can enable the function at any time by repeating the above algorithm of actions.
Sometimes, after the latest update to the Chrome browser was released, many users have a problem with the display of the font, namely, it becomes fuzzy, blurry, making it impossible to read anything.
In older versions, before the release of version 51, solving this problem was not difficult, but with the advent of version 52, the developers presented users with a real surprise, unfortunately, an unpleasant one.
How to change unreadable fonts
The creators of Google Chrome decided to remove the possibility of personal settings appearance font using the experimental option “Disable DirectWrite Windows”, which was a real lifeline for users suffering from fuzzy fonts. Now it has been removed. 
How such a step can be explained is completely unclear, however, on the forums, which also applies to the official Google forum, you can find big number negative reviews, in which they not only ask, but demand that everything be returned as it was. But it looks like the developers will leave everything as it is.
Problems using the browser
The problem with displaying fonts manifests itself in various ways.
First you need to find out which version of Google Chrome you have installed, for which you need to type in address bar chrome://help/ and press enter. The “about the program” page will immediately open.
If your browser has version 52 or higher, then it would be a good idea for you to familiarize yourself with the methods below. Although there is currently no method by which you can use the capabilities of Google Chrome itself to make fonts clear, since thanks to the developers, users have lost the chance to influence this, there are still a few tricks
There are only 2 options to solve this problem:
- Start working with another browser, for example, Firefox. Latest version Opera, like Chrome, has a number of problems with the display of fonts, in particular with its color, which is explained by the same engine on which they were developed.
- Roll back Google Chrome to a previous version when there were no such problems, and configure the DirectWrite parameter. However, there is one caveat: there is no way to roll back using the settings of the browser itself, since there is no such option. Even if the current one is deleted Google versions Chrome, it will not be possible to find installation files for earlier versions on the official developer website.
Rollback to a previous version of Chrome
In order to do this, you need to follow this scheme:
Before deleting the browser, you need to synchronize all the necessary information with Google account Chrome so you don't lose them. To do this, you need to type chrome://settings/syncSetup in the address window of your browser, and then press enter. After this, a window will open where you can mark the items you need, or better yet, just select the “Synchronize everything” option. Now you need to wait a little while until synchronization is completed, especially if until this moment this option was disabled. 
After you install the previous, normally working version of Google Chrome, again using synchronization, you need to change all browser settings to the previously used ones, be sure to turn off the automatic update before new version, otherwise Chrome will return everything as it was, and you will only waste your time.
Disable Chrome update
To prevent Google Chrome from updating itself, you should use one trick. Go to c:\Program Files\Google\Update\ or c:\Program Files (x86)\Google\Update\ if on your computer operating system 64-bit version, and delete one GoogleUpdate.exe file.
You can find it online a large number of recommendations that insist on editing registry entries, changing group policy Windows, adding administrative templates and the like. As a rule, most of these instructions were compiled by those users who did not do all this themselves, but only rewrote what they had previously seen on some forum. To solve such a problem, all these actions are not needed. It is enough to delete the GoogleUpdate.exe file and Google Chrome will no longer update itself. 
If you ever need to install a new version of the Chrome browser, in this case the user himself will need to go to the official website of the developers and download installation file, and then install it successfully. As you can see, there are no problems with disabling browser updates, everything is very simple and easy.
By following these tips, you can rid your browser of problems with font display, change its color to normal, and work with Google Chrome as before.