I am using Google Font 'Righteous' and this shows fine on every browser on my Mac and PC. However my client has noticed that on his copy of Google Chrome the font is showing in a very odd fashion, look at the screenshot:
Does anybody know what could be causing this? Is it a browser issue or is it something that can be rectfied in the code or CSS?
The CSS is pretty basic:
h1, h2, h3, h4 { font-weight:normal; font-family: 'Righteous', cursive; }
As I said, in my version of Chrome it's fine! Any help much appreciated!
It's possible that the user has a font on his/her system called Righteous which is interfering, though I'm not sure how likely that is. And unless I'm blind, you haven't posted a link to it, so I can't really comment much. In response to #kubedan about the chrome console, that doesn't mean anything, just chrome complaining that google isn't sending the right HTTP Headers back with the font.
Related
Okay so its time for that ancient problem that keeps coming back. My client's site is looking pretty weird in Internet Explorer. The top menu is out of position simply because its too large and on the rest of the site, it just doesn't seem to show up.
http:www.imscs.com
We're using the custom font 'Open Sans Condensed Light No Subsetting', Wordpress 4.3.1, 'BeTheme' (Theme), and I've tried #font-face with no luck.
Here's the link, if anyone can see what's missing I'd really appreciate it.
I´ve finally continued work on a hobby-project of mine, after months. I had some computer problems at the beginning of the year, had to do a new Windows install, lost the DB, but could retrieve the scripts. As far as I know, everything is exactly the same as before, except for the absolute urls. I´m working purely on localhost. I´m sure everything was working fine in all major browsers before I stopped working on it, unless my memory fails me. Trying to get it to work, I simplified the code / filename:
#font-face
{
font-family: "cabin" ;
src: url("http://localhost/hrhr/fonts/cabin.ttf");
}
*
{
margin: 0px;
padding: 0px;
border: 0px;
font-family: "cabin";
}
Some remarks:
As said, it does not work in Chrome (33), nor does it work in Opera (20).
It does work in Internet Explorer (11). It already worked without simplifying the code and file name.
As said, I´m pretty sure everything was working fine a few months ago, and nothing has changed apart from absolute urls, and the browser versions.
As suggested by an anwser from a similar question, I´ve tried adding the format, this didn´t help.
I´ve tried variations on quotes.
It generally doesn´t show up in Chrome developer tools under resources. Strangely sometimes it does (after trying variations on the code), and when that happens, it displays the name right, but the example font is wrong (presumably Times New Roman).
I´ve tried copying the font file in other folders and using relative urls.
It displays fine if I remove the #font-face rule, install the font, and just use the local reference, and it also works if I use a Google webfont reference.
I think I´m grossly overlooking something, but Googling didn´t help me yet, and I find it strange IE has no problems whatsoever with my code. Thanks in advance.
Edit:
The font can be found here:
http://www.impallari.com/cabin
Edit 2:
Thanks to Dima´s anwser, I´ve solved the problem, but I´m no closer to understanding it.
I used the fonts and script the site provided me, like I said, that worked, then step by step, I removed elements so it resembled the original situation more and more, until it stopped working again. So basically, I can get it to work with my script and the "converted" ttf file, so the problem seems to be inherent to the original ttf file itself. The script, file paths or cross browser compatibility aren´t the problem. Once converted, Chrome had no issues with it. But I have no idea what the technical difference is.
Tomorrow I´ll see if I can find a font viewer to see if I can find the difference. I also may mail the creator of the font (asking if he´s aware of problems with it), and I´d like to know if other people have issues with the font "as is", so without converting it. Unless someone gives me a technical explanation, I´ll accept Dima´s anwser and will just learn to "convert" the font.
try using it like this:
#font-face {
font-family: 'Cabin';
src: url("/fonts/cabin.eot");
src: url("/fonts/cabin.eot?#iefix") format("embedded-opentype"), url("/portals/0/fonts/cabin.woff") format("woff"), url("/fonts/cabin.ttf") format("truetype"), url("/fonts/cabin.svg#cabin") format("svg");
font-weight: normal;
font-style: normal;
}
this will make sure that all browsers are covered... your best bet is to upload .ttf font to web font generator like this one or this one, it will then generate the web font in different formats and you'll be able to download it... it will also include the CSS for it which will be similar to the one I showed above
EDIT: to answer your question about why that is, there is no right or wrong answer, that's just the way it is. Different browsers support different font formats. You can read about some of it here
You can even use #import url('fonts/cabin.ttf');
And to use it, open your TTF File, and see the name of the font, if it says Cabin, then, font-family: 'Cabin';
I don't even know how to properly identify what the issue is here, but my Google Chrome isn't rendering fonts properly. At least not Helvetica, anyways. Taking a screenshot is the only proper way I can explain what's happening:
http://i.imgur.com/rKlI86r.jpg
This happens with nearly every website, but only in my Chrome. I have no clue how to fix this.
Thanks.
Its a problem with the font Helvetica that you have in your system. Just uninstall that font.
I am using a google web font on a site and am getting some users reporting very squished unreadable text throughout the entire site. I am unable to see this any browser or computer I use, so I am not sure what could be causing this.
Here is a screenshot of the issue:
Any suggestions to fix this would be great. Thanks!
Here is the url to site: http://odditymall.com
i would guess your website is not responsive and u have done some html/css changes to your website so its causing it like that. y dont u try accessing the source through chrome element inspector and then play with the code maybe u'll find ur answer there. else send the site link so we could check it up, if thats possible though..
If anyone is having the same issue... From google fonts, I was getting the 'Droid Serif' font, but in my css I was using:
font-family: 'Droid', arial, verdana;
So, since droid did not exist anywhere, the text on the site would look like the screenshot above for a very small amount of people (for whatever reason). To fix it for those people, I just had to change it to:
font-family: 'Droid Serif', arial, verdana;
I'm using google webfonts and they fine at super large font sizes, but at 18px, they look awful. I've read here and there that there are solutions for font smoothing, but I haven't found any where that explains it clearly and the few snippets I have found don't work at all.
My h4 looks awful in pretty much every browser, but Chrome is the worst. In Chrome, pretty much all of my fonts look terrible.
Can anyone point me in the right direction? Perhaps you know of a resource that explains this clearly? Thanks!
EXAMPLE SCREENSHOT #1
This screenshot shows the homepage of https://www.dartlang.org/, a programming language that is made by Google (so we can imply that this website is also build by Google) and uses Google Webfonts.
Screenshot shows Google Chrome on the left, Firefox/Internet Explorer on the right.:
EXAMPLE SCREENSHOT #2
This screenshot shows a product info page on Adobe.com, using webfonts provided by Typekit. Adobe & Typekit are professionals when it comes to fonts.
Screenshot shows Google Chrome on the right, Firefox/Internet Explorer on the left:
Status of the issue, June 2014: Fixed with Chrome 37
Finally, the Chrome team will release a fix for this issue with Chrome 37 which will be released to public in July 2014. See example comparison of current stable Chrome 35 and latest Chrome 37 (early development preview) here:
Status of the issue, December 2013
1.) There is NO proper solution when loading fonts via #import, <link href= or Google's webfont.js. The problem is that Chrome simply requests .woff files from Google's API which render horribly. Surprisingly all other font file types render beautifully. However, there are some CSS tricks that will "smoothen" the rendered font a little bit, you'll find the workaround(s) deeper in this answer.
2.) There IS a real solution for this when self-hosting the fonts, first posted by Jaime Fernandez in another answer on this Stackoverflow page, which fixes this issue by loading web fonts in a special order. I would feel bad to simply copy his excellent answer, so please have a look there. There is also an (unproven) solution that recommends using only TTF/OTF fonts as they are now supported by nearly all browsers.
3.) The Google Chrome developer team works on that issue. As there have been several huge changes in the rendering engine there's obviously something in progress.
I've written a large blog post on that issue, feel free to have a look:
How to fix the ugly font rendering in Google Chrome
Reproduceable examples
See how the example from the initial question look today, in Chrome 29:
POSITIVE EXAMPLE:
Left: Firefox 23, right: Chrome 29
POSITIVE EXAMPLE:
Top: Firefox 23, bottom: Chrome 29
NEGATIVE EXAMPLE: Chrome 30
NEGATIVE EXAMPLE: Chrome 29
Solution
Fixing the above screenshot with -webkit-text-stroke:
First row is default, second has:
-webkit-text-stroke: 0.3px;
Third row has:
-webkit-text-stroke: 0.6px;
So, the way to fix those fonts is simply giving them
-webkit-text-stroke: 0.Xpx;
or the RGBa syntax (by nezroy, found in the comments! Thanks!)
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
There's also an outdated possibility:
Give the text a simple (fake) shadow:
text-shadow: #fff 0px 1px 1px;
RGBa solution (found in Jasper Espejo's blog):
text-shadow: 0 0 1px rgba(51,51,51,0.2);
I made a blog post on this:
If you want to be updated on this issue, have a look on the according blog post: How to fix the ugly font rendering in Google Chrome. I'll post news if there're news on this.
My original answer:
This is a big bug in Google Chrome and the Google Chrome Team does know about this, see the official bug report here. Currently, in May 2013, even 11 months after the bug was reported, it's not solved. It's a strange thing that the only browser that messes up Google Webfonts is Google's own browser Chrome (!). But there's a simple workaround that will fix the problem, please see below for the solution.
STATEMENT FROM GOOGLE CHROME DEVELOPMENT TEAM, MAY 2013
Official statement in the bug report comments:
Our Windows font rendering is actively being worked on. ... We hope to have something within a milestone or two that developers can start playing with. How fast it goes to stable is, as always, all about how fast we can root out and burn down any regressions.
I had the same problem, and I found the solution in this post of Sam Goddard,
The solution if to defined the call to the font twice. First as it is recommended, to be used for all the browsers, and after a particular call only for Chrome with a special media query:
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}
}
With this method the font will render good in all browsers. The only negative point that I found is that the font file is also downloaded twice.
You can find an spanish version of this article in my page
Chrome doesn't render the fonts like Firefox or any other browser does. This is generally a problem in Chrome running on Windows only. If you want to make the fonts smooth, use the -webkit-font-smoothing property on yer h4 tags like this.
h4 {
-webkit-font-smoothing: antialiased;
}
You can also use subpixel-antialiased, this will give you different type of smoothing (making the text a little blurry/shadowed). However, you will need a nightly version to see the effects. You can learn more about font smoothing here.
Ok you can use this simply
-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;
Make sure your text color and upper text-stroke-width must me same and that's it.