问题
I'm having difficulty getting google fonts to work in Chrome
I'm using Google's suggested link element to retrieve the font (which dev tools confirms works fine).
link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic"
In the CSS file I'm setting the font-family to 'Roboto Condensed' for all h2, button, select and input elements
In Google Chrome only the fonts are not displayed. I've uploaded the actual files I'm having a problem with to here http://gmwildlife.org.uk/mapapp/_dev/
the associated css file is http://gmwildlife.org.uk/mapapp/_dev/style/app.css
On checking the dev tools in Chrome I can confirm the following
* Roboto is successfully retrieved by the client - I can see the response text
* On inspecting an input element, for instance, I can see that the computed font-family is Roboto Condensed i.e. Chrome isn't computing that css specificity is overwriting Roboto Condensed somewhere else
* There are no errors reported in the console log
I thought this might be the same issue as reported and resolved here
Google Fonts are not rendering on Google Chrome
However I've tried both the CSS webkit workaround and javascript workaround individually and together and neither is working. Any help would be greatly appreciated. I've spent two days rewriting large chunks of the page and trying to hack a solution together using various combinations without a result i.e. requesting open sans and roboto separately and together (as is now), placing styles at various places in the DOM.
Thank you for reading this.
回答1:
RESOLVED: This was because the Roboto font I was using was italic. In Google Chrome I fixed this by adding 'font-style:italic' after every call to font-family:'Roboto Condensed'. I've left the broken version here gmwildlife.org.uk/mapapp/_dev and the fixed version is here gmwildlife.org.uk/mapapp
来源：https://stackoverflow.com/questions/27828509/chrome-is-not-displaying-google-fonts-when-all-other-browsers-do