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.
Related
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 ...
I’m experiencing an issue with Safari where a block of text using webfonts (not sure webfonts are the issue) is wrapping differently in Safari than it is in any other browser. In this particular instance, we’re designing these blocks to look like they’re set to text-align: justify; but they’re actually set to text-align: left;. text-align: justify; is undesired in this setting as it does a poor job of calculating the space between words.
Important things to know:
As I mentioned, the layout uses webfonts. It doesn’t matter which webfonts (I’ve reviewed hundreds and it happens for all).
The entire page, including padding and font-size, uses viewport width (vw). The idea here is that the block of text scales equally for all browser sizes and retains it’s layout, including rags.
A visual aid:
Details about the layout and dimensions:
Frame 1: Safari desktop.
Frame 2: Chrome desktop.
Frame 3: Chrome at 50% opacity over Safari.
Window width in this screenshot is 1220px.
Left/right padding is padding: 0 calc(129 / 1220 * 100vw); which computes to 129px.
That leaves the available content space of 962px.
letter-spacing is set to 0 by default for all content.
So, anyone have any idea why Safari seems to have exaggerated tracking/letter-spacing?
EDIT
We just launched the site in question, so you can see the issue in action here: https://www.typography.com/fonts/hoefler-text/overview
Well, there's a bunch of stuff at play.
First of all Chrome and Safari use different defaults for rendering text, But in addition to that Chrome on different versions of MacOS or Windows will render text differently too because of how the system font rendering works.
You can typically make Safari and Chrome (on the same system) feel a bit closer by setting your text CSS to:
text-rendering: optimizeLegibility Since this is the default on Chrome but Safari defaults to optimizeSpeed
It might also be wise to explicitly set: font-feature-settings: "kern"; and font-smoothing: antialiased (note those both need vendor prefixes)
Next, make sure to specify a numeric font weight. Eg: font-weight: 400 for "regular". (The browsers might not pick the same weight for the normal/bold keywords)
Finally, make sure you're serving up the most optimized version of a webfont (Typekit & Google usually do this for you, but it's an issue if you're self-hosting the fonts)
Edit:
It might be worth forcing both Chrome and Safari to create a "compositing layer" (basically means its GPU accelerated). You can do that with backface-visibility: hidden. Though I suspect this is a MacOS specific thing and there may not be a solution in the browser.
Adding font-feature-settings: "kern"; to the element for the fonts solved my problem with Safari not rendering the letter-spacing properly.
I had the similar issue while building an html banner using a .woff font: Safari was applying an exaggerated tracking/letter-spacing.
Bryce's suggestion to use font-weight: 400; fixed the issue.
I'm building a website with Dreamweaver, and noticed that IE (I have IE10 on Win8) doesn't render my fonts as sharp as Chrome, see the example picture. Firefox is a bit off as well.
this problem is much more noticed when using small bold text.
Here's an example for 14px arial bold:
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.bold {
font-weight: bold;
}
HTML:
<span class="bold">Hello</span>
Maybe the problem is in the browser and not the style, but is there any solution to make the website easier on the eye of the visitor?
Let's zoom in for a closer look at your examples:
Chrome:
Firefox:
IE:
Notice that Chrome and Firefox are clearly using subpixel rendering (a.k.a. ClearType), while IE isn't. The difference probably comes down to user settings (or the browser / OS default settings, if the user hasn't changed them).
In particular, whereas Chrome and Firefox do their own text rendering, IE uses the default text rendering settings of the OS. Apparently, since Windows 8, ClearType has been disabled by default for Metro-style applications, including IE. Don't ask me why, though.
Anyway, the bad news is that, as a web developer, there's not a lot you can do about this. In fact, you can't even count on subpixel rendering being possible, let alone enabled, for all users — it only works on certain types of displays. You really just have to accept that the details of text rendering are going to vary between users, depending on lots of things like the browser, OS, display hardware and user settings.
Edit: Well, OK, you could try using something like Cufón, but that sounds like swatting a fly with a sledgehammer. In any case, if you used that for all text on your site, I'd expect the performance to be pretty horrible.
Hey everyone, I'm working on a site and any special characters ("’" "…") turn into garbage at any font size over 19px. I'm using fonts I defined with #font-face, and the garbage disappears when I use a fallback font. This is Firefox 3.6.13.
I've tried defining the fonts in the page with a font: declaration rather than a font-family: declaration (see here) but it doesn't work.
I can use the standard straight quote and skip the special characters, but have you seen a straight quote in a heading at 40px? Ugh.
Anybody seen this bug, and any suggestions to fix it server-side?
Perhaps you will simply have to use another font?
After some more research, I (sort of) figured out what's going on. Firefox 3+ will automatically "optimizeLegibility" for any fonts over 20px (look up CSS "text-rendering" property).
For whatever reason, the fonts I am using don't render correctly when Firefox applies this value. If I specifically declare:
body { text-rendering: optimizeSpeed; }
Suddenly the problem disappears. Obviously this might bother someone who likes the effect of "optimizeLegibility" (it's definitely a nice effect), but if you can't change font-faces and you're getting garbage in your headings, I hope this helps.
font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:100
font-weight:200
font-weight:300
font-weight:400
font-weight:500
font-weight:600
font-weight:700
font-weight:800
font-weight:900
I've only used font-weight:bold and sometimes font-weight:normal to override bold so far. What are the usages of the others?
I created this example page with all the values for the property, but there's not much difference in many of them.
http://jsbin.com/omaha3
If the font you are displaying has more weights like semi-bold, light, etc. the browser may be able to render those weights if you use one of the numeric values. Most end-user fonts come with two or three styles only, though, so I don't think this is much applicable to the real world. I would rely on normal (=400 I think) and bold (=700) only.
There's good additional info in the W3C reference on font-weight: bold as well.
Update: Here is an in-depth blog post on how the styles are rendered in modern browsers. It is titled "Font-weight is still broken in all but one browser" :)
2nd Update: As clagnut.com suffered a catastrophic dataloss here is the archived post
It depends on the browser/OS too. Firefox on the Mac tends to support more graduations (5 different weights for Myarid pro) and Firefox 3 on Windows will sometimes display a light font. The other browsers on Windoows or Mac only display two weights - bold or normal.
When I want cross-browser control of font-weight, I set my text color to a grey - say #777 and then my bold colors can be #444 and #000 and my lighter colors can be #aaa and #ddd. It doesn't change the thickness like font-weight does but it still gives the visual impact.
edited to add the IE6 craziness with font-weight
font-weight:600 in a print stylesheet causes IE6 to print out bold and italic but print preview shows only bold.
Depends on requirement, and can be useful when you are creating proportional font sizing for stylish textual looks.