I'm having an issue where font-variant: small-caps isn't rendering correctly in Firefox. Any other browser is fine. I'm stuck with this particular font, and even this particular definition of the face due to its license.
How it looks in Firefox:
How it's supposed to look (from Chrome):
Is this a problem with the encoding of the font? Is there a work-around?
The issue is presented in full in this jsFiddle. (Base64-encoded font was too big to put all in the question.)
The font is broken for those characters. Other browsers fallback to the next font in a different way from Firefox. You can see this by providing an obviously different font as the second font in the font-family. For example, in this JsFiddle, Wingdings is used as the first fallback font. i.e.
body { font-family: "THAT-FONT", Wingdings, "Open Sans", "open-sans", Sans-Serif; }
https://jsfiddle.net/rnwvpfy1/2/
See how Chrome displays that, showing that it's not using the "THAT-FONT" font for the broken characters.
Related
I want to use the Aller font on my website, which seems to work fine in Firefox. In Chrome however, the 's' and 'k' characters (and only those) have a bigger height than the other characters.
The font renders correctly in Firefox (on Linux and MacOS), in Chrome (on MacOS), but not in Chrome on Linux. Font is not installed locally on the Linux machine.
Css rule:
#font-face {
font-family: "Aller";
src: url("../fonts/aller/Aller_Lt.ttf");
font-weight: 400;
font-style: normal;
}
Chrome (on Linux) preview of the font (seems to be good):
Screenshot of text on my website with incorrect font rendering (taller 's') with Chrome:
Screenshot of same website on same machine with Firefox with correct font rendering:
How can I make sure that in Chrome the font is rendered correctly? Is this an issue with Chrome, my code or the font itself?
This is usually a problem with fonts that aren't hinted, or not hinted correctly. There are PS Private settings you can configure in the font (called BlueValues, or OtherBlues - more information on these here) that help keep all of the characters on the same line like this - if they aren't present, the rendering just chooses the closest pixel without regard for if it's above the others. The problem will be less noticeable in the larger font sizes, and will vary from browser to browser like you've witnessed.
It doesn't look like this font is hinted - looking at the specimen page, you can see a similar issue with the a and p of alphabet. I'd advise trying to use a hinted font, or adding the hints yourself, if you're interested in that (and the license allows it).
I try to install Roboto on my website, using Google Fonts, and I feel desperate to see that Roboto is bolder (much bolder) in Firefox than in Google Chrome.
Here are my codes :
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
And
p
{
font-size: 1.4rem;
line-height: 1.5;
font-family: "Roboto", sans-serif;
letter-spacing: 0;
color: #313131;
}
And here are two preview of Roboto Font, first with Firefox, second with Chrome:
As you can see, the Chrome Roboto is much lighter.
I don't know why it happen, but I've find something on Google Font. Using Firebug on their own code, I discover that the Roboto Font used on their website has attributes :
element.style {
font-family: "Roboto script=all rev=1";
}
And when you remove the "Script=all rev=1", Roboto become much bolder in Firefox and in Chrome (but so much in Firefox). Just like on my Work in progress.
Does somebody have an answer, a solution, or something? I feel lonely to see that not even Google can inform me about what is script=all rev=1 and why it makes Roboto much lighter on Google Font.
The reason it is lighter is because Chrome is using a locally installed Roboto Font which does not have the bold version, and it is thus falling back to the thin version (rather than switching to the web font.) This is arguably a Chrome bug but I don't know of any existing report.
According to Force Chrome to use external font in CSS the special font name works because the Google Web Font stylesheet gives an alternate name for the font "Roboto script=all rev=1", which obviously doesn't exist on the user's local system and thus gets served by web font.
I would like to know how chrome chooses which font to render? I am asking this because using Chrome Developer Tools I can see that the font family computed is different from the font family rendered and this is confusing. Similar questions on Stackoverflow was not of much help in this particular instance.
My computer font family looks like:
font-family: museo-sans, sans-serif, Futura;
Rendered font looks like:
Helvetica—473 glyphs
In this article, it is mentioned that chrome maps a rendered font to a the computed font listed. What does this mean exactly and why does it do that? Is there a way to control which font is rendered?
Same as any other browser: if it can't find the first font, it tries the next, and so on and so on until it runs out of rules. If no fonts match, then the font is inherited from the parent element, all the way up to the document level, where it'll just pick the browser's default font.
In this case, things are a bit weird, because the order you're showing is "a real font" followed by "a generic CSS class that always resolves, but without any guarantee as to which font that will be, just that it'll be a sans-serif font", followed by the real font "futura".
So Chrome will try museo, won't find it, sees the generic "sans-serif" and just picks a known sans-serif font for you. Usually that's something like Arial or Helvetica, but the CSS spec doesn't say anything about which font it has to be, specifically. It just needs to be a sans-serif font.
The weird part here is that the ordering you chose means that the "futura" at the end will never be checked. The browser will always find a suitable font once it hits serif, sans-serif, cursive, fantasy, or monospace
I was developing a website on a iMac and the character 'Š' was rendering properly, then I got some feedback that I missed the 'ˇ' symbol. I double checked it and I had spelled it correctly.
Does anyone know any 'CSS hack' or something to get the character rendered right?
I've tried text-shadow, anti-aliased font rendering without success.
Both examples were made on Google Chrome and font was imported from typekit using:
http://use.edgefonts.net/raleway:n1,n2,n3,n4,n5,n6,n7:all.js
Here's the code incase imgur and jsfiddle decide to drop the links:
* {
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-transform: uppercase;
font-size: 16px;
}
http://jsfiddle.net/aYFw2/
This appears to be a problem with the font, when some font rendering techniques are used. You can see similar problems with characters like Å and É. Depending on font size, the diacritic marks may be cut off in part (e.g. so that just a small dot appears) or completely. E.g., in size 24px the problem does not exist.
The conclusion is that if you wish to such small font sizes, or want your text to be legible in small sizes, you should use a different font.
On the site http://hanling.focusww.com
The header text in the h2 tags is huge in IE 9 compared to Firefox, Chrome, or Safari.
I'm looking for suggestions to fix this.
This is a wordpress site.
(this post was migrated from the Wordpress Stack exchange)
Suggested answer:
if you do migrate check this out for a possible answer.
Seems IE9 doesn't play nice with all fonts so you might want to supply your own for IE9 to read see here https://github.com/twitter/bootstrap/issues/3116 and here #font-face works in IE8 but not IE9
Seems like a font-weight issue
response:
We are not embedding any fonts.
The answer lies within your font-family declaration:
font-family: Bookman, serif;
If Bookman is not found, the browser falls back to the next available font in the chain. In this case you only have one fall back and that is set to serif.
The issue is that Firefox is falling back to its default serif font: Times New Roman, and IE9 is falling back its default serif font (which is different): Batang. You can sort this issue out by changing the declaration to something like:
font-family: Bookman, "Times New Roman", serif;
So now it would fall back to Times New Roman first, and if that font is not available then it will fall back to serif which will be the browsers default serif font.