Sorts Mill Goudy is a great-looking font, and renders beautifully on Chrome.
However, it doesn't seem to have a native bold-face. (It does have italics, though.)
So, I suppose it is up to the browser to apply a "faux-bold" if the font-weight is set to bold.
It turns out that different browsers apply this "faux-bold" very differently. In the case of Chrome, it looks wonderful at 800 font-weight, but Safari and Chrome don't take the same approach. They are clearly trying to do something to make it bolder, but not doing what Chrome is. The result is reminiscent of pre-unicode foreign language encodings trying to typeset themselves... each letter seems a bit too wide, and it just feels "off", especially compared to how Chrome handles it.
What is going on here? Is there a way to export Chrome’s faux-bold as a font file (ttf or otherwise), and force other browsers to follow suit?
How can I achieve cross-browser consistency here?
<link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
<style>
h1
{
font-family: "Sorts Mill Goudy";
font-weight:400;
font-size:3em;
text-align:center;
}
h1.b
{
font-weight:800;
}
</style>
<h1>Test Text: Font-weight 400</h1>
<h1 class="b">Test Text: Font-weight 800</h1>
Codepen: https://codepen.io/1bc25a/pen/oNWOQoL
Image: Side-by-side font renderings
I am afraid that what is going on here is actually every browser doing his own thing in font rendering. It may even get worse if you test in Edge. Every browser seems to take its own approach to rendering font weight and anti-aliasing. So since you don't find a native bold face somewhere, there might be little you can do :/
It might be comforting that you are not alone with this problem, as you can see here: https://blog.stephaniestimac.com/posts/2020/06/browser-fonts/
And it might be helpful remembering that Mr. Berners-Lee knew from the very beginning that those new kind of pages would be displayed on all kind of devices and therefore HTML and CSS are all about taking control away from the designer and giving it to the rendering device or user.
You might try and hack about a bit by detecting browsers and feeding them differen font weights, but I don't know if that will make things better, and I am pretty sure it might not be worth it.
Sorry, I fear this is not the kind of answer you wanted ...
Related
See images:
Firefox on Mac:
Firefox on Chrome:
On chrome you can see that the same font using the same styling takes more room. What can I do so that all browsers will render the font the same way rather than adding more width to it?
I am using a font with #font-face property.
Unfortunately, there isn't much you can do about the way each browser renders your chosen typeface. Check out this article, it explains how different browsers and operating systems render different type face files:
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
In the meantime, you can do two things.
1.) There are many fonts that can be used that are effected by this rendering difference much less. Experiment with different fonts that hold the same esthetic value of the font that you are using, and try to find one that not only fits your typographic needs but also have a less distinctive difference between their individual renderings across different platforms.
2.) Create a script to sense the user's browser/OS and use that script to adjust your font-weight accordingly.
Best of luck.
You forgot to mention which of the two cases is the correct font rendering.
A few ideas that come to mind:
Since you mentioned using font-weight:600 I would try to replace it with normal/bold (depending which result you want) and check if it makes any difference. If the font file does not support a weight for 600 the browser will go on interpreting it by itself - sometimes it takes bold sometimes normal.
If the problematic browser is Chrome you can also try playing with font-smoothing - sometimes it helps improving the font rendering:
-webkit-font-smoothing: none || antialiased || subpixel-antialiased
Also I'm not sure how you are implementing the #font-face - if you wrote it yourself I suggest generating your #font-face rule trough some service like Fontsquirell since it will generate a crossbrowser compatible code which often eliminates a few problems.
For more help you will need to expand your question with a bit more data - add the #font-face code, font name and specify which is the correct font rendering. Poor questions get poor answers.
Here is an example:
First - how it looks in Chrome, second -in Firefox (hardly readable).
CSS:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 13px;
Can you please provide an example, how I can make this element's font bold only if browser is Firefox?
When I test 13px Arial, it looks slighty lighter in Chrome than in Firefox, rather than the other way around as in your case. Stay tuned to variation across browser versions, platforms, and settings, as regards to font rendering.
Usual browser detection techniques could be used in JavaScript to check whether the browser claims to be Firefox and modify CSS code accordingly. But this would be a shot in the dark, partly due to the variation mentioned, partly because there is really nothing you can do to fix the assumed problem. Bolding tends to change the overall appearance of text, not just slighly thicken strokes, and bolding often reduces readability.
Ways to avoid creating problems like this: Do not set font size to something as small as 13px. Especially for small font sizes, use black (or something very dark) on white (or other very luminous) background, instead of the opposite, and in particular avoid making the color contrast too small.
it seems firefox can only take 2 background url in css... if it has a 3rd the font makes that blurry/pixelated effect. NEVER THE LESS.... i found that its true on a windows XP. the same firefox on a windows 8 works fine. (I was surprised) i might think it has something to do with the "use hardware if available" option in forefox.
Try removing a background "image" or "color" from one of the table's CSS.... if its solved then... firefox sucks.
I am having some problem with Google webfonts.
I am using Google Webfont called ‘Bitter’.
But in Firefox and Chrome it is being rendered differently. Chrome and Opera seem to render it in similar way. It’s not drastically different but it’s messing up the formatting and compositions of the paragraphs.
Here is the CSS:
.small-col h3{
color: #606060;
font-family: 'Bitter', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;
}
And here is a screenshot of the issue I am talking about:
http://i49.tinypic.com/2u46mpi.png
Could anyone suggest how I can get consistent rendering in both Firefox, Chrome and Opera?
Thanks
Fonts are never going to render the same across all browsers. They use different rendering engines—trying to get websites to look identical on every browser is a lost cause.
For your specific problem, use a non-breaking space to prevent contact and us from being separated.
<p> ... contact us </p>
It looks like firefox is rendering the weight a little different, and the spacing a little differently too. Maybe try defining those numerically, as well, to override any browser defaults. Unfortunately, different browsers and especially OSs like to render fonts differently and by their own rules at times.
There can be differences in font rendering between browsers, though more often, differences exist between platforms.
However, here the difference seems to be caused by letter spacing. More exactly, Firefox correctly applies it, WebKit browsers don’t. For 16px font size, -0.06em should result in a little over one pixel, and if you use the inspection mode (F12, computed style), you will see that Firefox applies -1px whereas Chrome uses normal (i.e., zero) for letter-spacing. Chrome seems to have some threshold on the letter spacing value; making it just -0.065em changes things.
So especially if you prefer the Chrome rendering, just omit the letter-spacing. It is generally best to avoid letter spacing – the font designer should know better, and if you agree with her or his choices, use another font, instead of of trying to “fix” the font.
One of the differences between browsers is that Firefox applies kerning by default, other browsers don’t. But this is not relevant to the specific texts in the example, since the kerning table for Bitter has pairs of uppercase letters only (so “VA” would look different, for example).
I had the same problem with the serif font. If you write "serif" instead of serif (without ""), Chrome will render the same as Firefox.
Try adding the google webfonts code to the head of your website by using the provided javascript code, instead of css or #import.
This solved my problem on this topic.
For some reason, the spaces between words on a font that I am using disappeared. See:
http://www.fantasynews.com/
I'm using Twitter Bootstrap slightly modified to use Google Web fonts. The font in question is Oswald served up by Google web fonts:
http://www.google.com/webfonts/specimen/Oswald
And the spacing appears normal for me there.
I'm no CSS guru, but I have touched nothing in my code that should alter the way spaces are displayed. I don't know of anything that should target spaces in particular. I feel like this is some dumb mistake that I'm overlooking but I'm clueless. If I view the source, the spaces are clearly there as well as the spaces clearly being there when I inspect the element, in case some bit of javascript was playing a trick.
I am using the latest version of Chrome, although this also appears in Firefox.
I should say that the spacing problem appears specifically for the title in the boxes under latest player news
I forced it by adding word-spacing: 0.25em to my CSS, but I'm not yet 100% sure that fixed it in every browser. It's unfortunate that Google doesn't have an obvious way to link to a particular version of a font so you could be confident it won't change from under you.
Removing font-weight: normal; fixes the spacing (there are 2 instances being applied to it, Inspect Element and you will see them)
EDIT: This is a bad font, you should choose another one! It looks fine bold, but the normal version is awful.
Same problem here, i applied another font to the online website and pray for a solution :(
It may be a wrong encoded file on google's servers. Nobody's safe from minor issue like these, even the guy who encode typos in the webfont service.
I usually use Firefox(newest) for Ubuntu 12.10. Everything looks fine there. In Chrome however, your fonts are most definitely squished. I personally would choose a different font that renders more consistently. If you want to learn more check out Mozilla's MDC Kerning page to get started.
The main way that I use kerning is with the letter-spacing property.
h2 {
letter-spacing: -0.1em;
}
To say that this addresses "kerning" would be false. This actually affects "tracking". The only difference between the two is that kerning is the relationship between two character and tracking relates to a block of text.
I'm stuck with a problem. I'm trying to embed fonts with #font-face but they always looks bolder. I have tried everything: other fonts, change font-weight to "ligher" or "100" etc...
The font looks always as it is bolded. I'm pretty sure it could look good because I've seen it used in many other websites with #font-face and it looks thin and fine.
See the attached image link text (I know it would never look as in PS, but so different?)
thanks
Set the following in your stylesheet on whatever elements you are using font face on and it fixes the issue:
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
You are probably using the wrong weight file. Fonts will often be sold in different weights. You should verify that the file you're embedding with #font-face is the right weight.
The way the font looks on photoshop is obviously a graphical version of the font, specially, when photoshop has 5 types of blurring for fonts: none, sharp, crisp, strong and smooth. Those beside the original fonts, which they commonly are in one TTF and have the versions inside or, varios fonts for the different weights and faces.
Maybe if you enlighten us about the font type, the weight, blurring and whatever is useful for reproducing purposes would be useful to help you...
Fonts vary according to OS (Linux, Mac,PC) and even by browser, never mind the Photoshop blurring variants that Billeeb mentioned. For example Safari on windows applies some heavy anti-aliasing to make text smooth, which makes it look blaringly different on Firefox, even on the same machine.
In my opinion, the best way to have a consistent font experience is to use some sort of font replacement technology like Cufon. But this only works for not standard fonts with simple effects, you wouldn't want to use this if you need crazy amounts of drop shadow or blurring. For that its best to stick with images
This could even happen if you are using <h1> tag. h tags makes the font looks bolder.