CODEWITHSUNDEEP
htmlcssgoogle-font-api
panthro
panthro

Reputation: 24061

Font appears thinner in Firefox and Safari - fine in Chrome

I'm trying to get my font look reasonably the same across mac Chrome, Safari and Firefox (will move on to IE later).

I've been playing with:

 -webkit-font-smoothing: subpixel-antialiased;

The font almost looks the same, but safari and firefox it almost looks at least 1 weight thinner.

I also have tried:

-webkit-font-smoothing: antialiased;

And this for FF:

-moz-osx-font-smoothing: grayscale

Also I have this on:

text-rendering: optimizeLegibility !important;

This gets the fonts to look pretty much the same but it's not as smooth as subpixel antialiased.

Am I missing a property here? I know they are not going to look 100% the same across all browsers but you would think chrome and safari being both webkit browsers they would be the same.

I'm using Raleway from Google fonts if that's any help.

Upvotes: 2

Views: 2156

Answers (3)

LOTUSMS
LOTUSMS

Reputation: 10240

I recently came across this problem with the same conditions as you and same font type (Raleway from Google). Apparently, safari has some issues rendering the font face Google Fonts API sends when they include it in their code.

So in any other browser this @import url(https://fonts.googleapis.com/css?family=Raleway:900);makes a call for Raleway font weight 900. Not the case for safari.

SOLUTION:

Start by opening that security by making it a regular http. This is suggested here, @import url(http://fonts.googleapis.com/css?family=Raleway:900);

And then specify the font weight on the element.

h1{
  font-weight:900;
}

If you are using LESS or SCSS, you will be able to do this much easier with a simple mixin, but that's another subject.

Upvotes: 1

shinyatk
shinyatk

Reputation: 1065

I usually use this approach with

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

or

-webkit-text-stroke: 0.5px
-webkit-text-stroke-color: same color as text;

I hope this helps. Thanks!

Upvotes: 1

Malika
Malika

Reputation: 1

maybe the font-weight is light or lighter in your code try changing font-weight to normal font-weight:normal; or font-weight:400;

Upvotes: 0

Related Questions