CODEWITHSUNDEEP
cssgoogle-chromefirefoxfonts
Ryan
Ryan

Reputation: 1164

CSS - Fonts Render Differently in Firefox and Chrome

I'm using Google Fonts and CSS's @import method to include fonts onto my website.

Chrome displays the fonts beautifully; they have even weights and are crisp to view. Firefox does not replicate this rendering. See below:

Firefox vs Chrome

On the left you can see Firefox. The font weight of the title is not consistent. You can see that the smaller descriptive text has some additional weight than the Chrome counterpart.

Chrome is on the right, and as you can see, the fonts are respectfully weighted.

I am using the following CSS in an attempt to fix this issue:

@import url('https://fonts.googleapis.com/css?family=Muli|Source+Code+Pro');

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

How can I resolve this issue and have Firefox displaying my fonts with proper weights?

Firefox Version: 57.0.1 (64 bit) [Most recent]

Chrome Version: 62.0.3202.94 (64 bit) [Most recent]

Many thanks.

Upvotes: 6

Views: 10853

Answers (5)

herrstrietzel
herrstrietzel

Reputation: 17325

TL;Dr: Avoid »Faux bolds« – load proper bold variants

All browsers have ways to synthesize bold rendering for by default bold elements such as headings (<h1>,<h2>,<h3> ... <strong>) if no proper bold font variant is present.

The concepts how to artificially render a font bolder are not standardized – therefore you have to expect significant differences – we get back to it later.

Google Font API logic

As mentioned by jramm you need to make sure the actual bold weights are loaded – this is not specific to to the »Source Code Sans«.

https://fonts.googleapis.com/css?family=Source+Code+Pro

or using the newer API version

https://fonts.googleapis.com/css2?family=Source+Code+Pro

just passing the font-family name as a query parameter only returns the normal/400 font weight. BTW. it also excludes any available italic variants – so your italics will also be »faux«

/* only loads the 400 weight */

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

/** proper weights **/

@font-face {
  font-family: 'Source Code Pro2';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Code Pro2';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2');
}

body {
  font-family: 'Source Code Pro'
}

.proper {
  font-family: 'Source Code Pro2'
}
<h1>Heading (Faux Bold)</h1>
<p>This is the paragraph text (default: font-weight:400)</p>

<div class="proper">
  <h1>Heading (Genuine Bold)</h1>
  <p>This is the paragraph text (default: font-weight:400)</p>
</div>

Rendering differences

As already mentioned, different browsers have different text renderings based on the used rendering engines or drawing-modes or user-settings (e.g for sub pixel rendering).
However, these differences are not as severe as long as you avoid synthesized bolds. The results also differ from OS to OS as most browsers to some extend reuse the OS's text-rendering eco-system (e.g Cleartype for windows or Freetype for Linux distros/forks) – albeit with other settings.

text rendering
top: Firefox, bottom: chromium

You can see significant differences as Firefox takes a different approach (kind of like duplicating the text horizontally whereas Chromiums boldening algorithm looks like a outline-stroke-thickening).
However, these differences are not too severe as long as you avoid synthesised bold. The results also vary from OS to OS, as most browsers make some use of the OS's text rendering ecosystem (e.g. Cleartype for Windows or Freetype for Linux distros/forks), albeit with different settings.

Proper/genuine bolds

genuine bolds

Once we apply proper bolds, the difference becomes less obvious.

Disable synthetic styles

You can also disable any »faux« styles by adding a CSS rule

h1,
h2,
h3,
h4,
strong,
b{
  font-synthesis: none;
}

Upvotes: 0

jramm
jramm

Reputation: 831

For this specific font (Source Code Pro), I had the same problem - the rendering was very different across Chrome/Firefox. It turned out that we had only imported the 400 weight version of the font, but we were setting it to font-weight: bold in the css.

Our old font def:

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(<FONT URL>) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Chrome tried to render the font bold even though a bold version didn't exist (and did a pretty good job of that), while Firefox simply didn't even try to render it bold. So that's why they looked so different.

We resolved the issue by importing the bold variation of the font as well and now Firefox renders it very similar to Chrome.

Our new font def:

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(<FONT URL>) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), url(<FONT URL>) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Upvotes: 1

nim
nim

Reputation: 2449

As others wrote, don't bother trying to "fixing" text rendering in browsers (or operating systems)

Text rendering is an awfully complex process with lots of heuristics and special cases, browsers and operating systems are always tweaking their rendering to try to achieve better compromises, they are not nor ever will be consistent with one another or from version to version, and depending on the font (and font version) you use you may hit a rendering sweet spot or horror case.

Plus your evaluation of the result will always be heavily biased by the rendering you're used to, and your users will often have different habits and preferences.

The only rendering you may fix is the one on your system for your tastes, and the best way to do that is just to buy a HiDPI screen, as most of the text rendering approximations, bad rounding and heuristic black magic is due to trying to fit complex and small glyph shapes in not enough pixels.

Upvotes: 2

Ryan
Ryan

Reputation: 1164

I have been testing a few things out, and I've found some way to make sure that Firefox doesn't show an inconsistent font weight.

I can use some jQuery to detect the browser, and from there I can add browser-specific styles. In this case, I've added a font-weight to the title block so that it has a lighter font-weight, which creates a cleaner look:

Firefox (Light Font) vs Chrome (Regular font)

On the left is Firefox with font-weight: 400, and on the right, Chrome with font-weight: 600. See below for my browser-detecting jQuery.

if (navigator.userAgent.search("Firefox") >= 0) {
    $('body').addClass('firefox');
}

My CSS is as follows:

body.firefox h1 {
     font-weight: 400;
}

It's not necessarily a fix, however it removes the choppy-ness of the font weighting.

Please feel free to comment about any better ways of doing this, or with a more practical solution to the question.

Many thanks.

Upvotes: 1

Jerome Indefenzo
Jerome Indefenzo

Reputation: 967

You're walking a bleak path. Right now, your best bet is to keep things as is and let the browser and OS makers fix their text rendering implementations.

Trust me, I've played with all these settings and none will produce a decent/consistent render, especially when you start testing across Windows, OS X, and Linux.

Overriding text-rendering and font-smoothing will eventually slow down your entire app (especially on instances where the DOM tree is large).

It will look bad no matter what if the end-user doesn't care about text rendering (perhaps he didn't set up ClearType on a Windows XP?).

Point being: do not try to force the text-rendering on all your elements. On headings where the font-rendering looks really off, try using geometricPrecision as that will try to keep the original shape precision of the font glyphs upon rendering.

Upvotes: 2

Related Questions