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 hereGoogle 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.
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
Related
I'm having an issue with FontAwesome (v4) webfont icon rendering in Chrome when Chrome's caching is enabled. Intermittently, across multiple user machines, a page will load with our FontAwesome icons displayed incorrectly as below. This issue happens only occasionally and can't be reliably reproduced or narrowed down to a single page. The only common repro steps are using Chrome and not having "disable cache" enabled in dev tools or elsewhere.
Checking dev tools computed styles for the icon elements reveals that Chrome is correctly detecting the specified font-family as "FontAwesome", but the <i> tags for the icons are being rendered in Times New Roman, rather than the FontAwesome webfont. The "FontAwesome" #font-face declaration and the above rule assigning font-family: FontAwesome to the .fa class exist in the same stylesheet, site.css, which is causing the issues.
Checking the source below, we see that site.css is properly specified in the site's <head> tag. It isn't being added to the <head> through JavaScript; it's present in the in the initial page loaded by the browser. The href points to the correct stylesheet, which loads without issue when opened in a new tab. This isn't very surprising, since all of the styles specified in site.css are correctly being applied to the page (except for the webfont, of course). Even the .fa's font-family rule is being read correctly by Chrome, as shown in the computed styles in the screenshot above.
My suspicion is that Chrome is loading the stylesheet from cache in a weird way that's allowing all of the styles to load but is interfering with the creation of the FontAwesome webfont. Potential evidence for this below:
Above is a portion of the network tab from the dev tools session. Nothing has been filtered out, but site.css has no entry in the list of requests, even though other cached stylesheets are present and the styles from site.css are being applied to the page. There are entries for theme.css, jQuery, AdminLTE, and other stylesheets specified just after site.css in the same <head> block. It's not pictured, but the fontawesome.woff2 webfont file, specified in site.css's #font-face declaration for "FontAwesome", is also being successfully loaded.
Refreshing the page or navigating to another one sometimes fixes the issue. Refreshing with cache disabled always fixes the issue. Every page of our (quite large) web app loads this stylesheet using the same <link> tag, and while this issue pops up fairly rarely, it has happened across many of those pages. The site.css stylesheet is clearly being loaded by Chrome, as it sees the font-family: FontAwesome rule along with the rest of our site styles. But something seems to be happening during the loading of the stylesheet from cache that's causing Chrome to fall back to Times New Roman despite the webfont being both declared via #font-face and specified as the font-family for the affected elements.
We aren't using a service worker or any server-side caching. We do some cachebusting via a GET parameter as shown in the screenshots above (the ?[productName]Version=2.0.13292.0), that value is baked into the initial document loaded by ASP.NET and changes only when our backend server's version changes -- so that shouldn't be the cause of the issue here.
Has anyone experienced anything similar with Chrome webfonts?
I had the same problem. My compiled CSS file was missing #charset "UTF-8"; and as a result, the cached icons font was broken. Please check if this helps you.
I'm using Google's font Rubik on a website (still work in progress) and it stopped showing any text suddenly!
It seems that even on Google Font website the font isn't working:
https://fonts.google.com/?selection.family=Rubik:400,900&query=rubik
("All their equipment and instruments are alive." isn't showing below Rubik, but if you inspect it, it is in there)
Is anyone else having the same problem?
I'm having this issue using Windows and Chrome, Firefox or Edge.
UPDATE: without changing anything, the font started working again today. I guess whatever problem existed, Google fixed it.
Upon further investigation, it seems their font for "Rubik" is corrupt or otherwise problematic. Conversion to ttf gives the same results. The font can be previewed under Windows, but the behavior in-browser (FF56.0b2) is the same.
Browsers that appear to render it might be doing what mine was, using a system fallback that looks similar.
This is an issue on their end as the problem is with the font file and not their stylesheet as I had originally stated in this answer.
I converted the woff to ttf using Google's woff2 tool, then tried the ttf version locally, without unicode-range and the results are the same. Here is a preview of the truetype version of the font, converted from the woff2 version, in FontForge, if anyone wants to see if the glyph's are in the correct location (note that this version of the font also doesn't work in-browser):
Google Fonts pushed an update with hinting that had a bug for some rendering systems, and rolled back the update within 24 hours.
If you remove the "/" after ".com" and add a space it worked for me. This font was working for me yesterday, so now the only problem is if they fix the path it wont work again. Hope this helps
All WordPress sites render strangely and Google searches look weird as well.
For WordPress sites, it loads fine, but then looks like the picture moments later.
Additional information:
Mozilla Firefox had the same issue on the same page.
Enabling Microsoft TrueFont did nothing.
Restarting chrome did nothing (except the last time).
If you use an extension (font changer) to force all fonts into 'Times New Roman,' the problem vanishes.
Chrome LCD Text Antialiasing does not fix the problem.
Forcing other sites to use 'Noto Sans' (pre-relaunch) replicated the problem.
Whatever font Google used was also messed up. After relaunching and installing 'Noto Sans,' google was fixed. Google's font does not appear to be 'Noto Sans,' however, which leads me to believe it fixed itself somehow.
The problem appears in incognito mode.
Clearing the cache does not fix the problem.
I installed the font in question, which I discovered to be 'Noto Sans,' to my computer. Following a relaunch of chrome, it seemed to fix itself.
EDIT: This did not fix the problem, I had to manually install an extension to replace the text on pages with a custom font before the problem vanished.
I am seeing an issue with a site I am developing where the content regions of the page are showing random artifacts with font rendering. The pages are using Google Font 'Source Sans Pro' and there are no additional tags other that p-tags in the screenshot below. It looks like it is using the fallback sans-serif on parts of the page and the appropriate font in others.
I've also noticed if I toggle the font-family CSS attribute in the console on and off it remedies the appearance... Additionally if I refresh the page (instead of using the on-site navigation) it also seems to render properly. I've not been able to replicate this on another machine with the latest version of Chrome, but it is consistent across my development and test environments. The only extensions I am using are Disconnect, AdBlock, PageSpeed Insights, an RSS reader, and Javascript Quickswithcer... All other browsers appear to behave as expected.
CSS used:
body,*{font-family: 'Source Sans Pro',sans-serif}
Any ideas as to why the latest version of Chrome for Windows may be getting presented this way?
I believe I came across a similar issue. I was able to fix it by overriding the CSS text-rendering: optimizeLegibility set on the body tag by a CSS framework I was using like so:
body { text-rendering: auto; }
Note: In the interest of trying to track the bug down, my version of Chrome is 48.0.2564.116 (64-bit) on OSX El Capitan. A coworker told me about the issue and I had to switch to incognito mode before I started seeing the issue.
I'm having issues with how the fonts are rendering on a site I'm working on the font-weight is all 300 and I'm using the Google font lato. This issue only seems to be on Google chrome i've tried it on different versions of chrome i.e. windows and Linux and different browsers i.e. Firefox and safari. I had the import code in my style sheet but have since removed it and put it in the html but to no avail. I've also got -webkit-font-smoothing: antialiased; on.
I have uploaded an image to show you how the font is rendering
Thanks in advance for your help.
Thanks for your help with this. I managed to solve the problem, the issue was setting font-feature-settings: "kern","liga","frac","pnum"; to the body of my pages this caused the random words being bold. This wasn't being used effectively so i've removed it. I haven't been able to replicate this so this could be a combination of things.