0

I've a problem in two websites ussing Google Fonts. I don't know but the fonts are very different in Chrome and Safari (in Mac). All my css is the same in the two websites but in Mac the fonts not render well. There is a example:

enter image description here

The first is very sharp but the second is more weight... and are the same font, same weight property...

This is only one example, the problem happend in all my texts in my website.

What can be the problem?

Edit:

I think to other diference... The first website works under Wordpress but the second website not, but I think this can't be the origin.

Marcos
  • 241
  • 5
  • 13

2 Answers2

0

Make sure of three things -

1) You imported the font from an http URL while you might need https (or the other way around)

2) You imported the desired weight. Each google font should be imported along with the weights which are available for it. For instance, this code - @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); imports the font in weight 400 (normal) and 700 (bold).

3) You're running the latest version of the browser you use

Roysh
  • 1,542
  • 3
  • 16
  • 26
  • Yes @Roysh, I import with http or https when is necessary, I used the 400,600,700 in my fonts and in css file declare all like "font-weight:700;" and yes, I'm use the lastest version of the browsers. – Marcos Jan 26 '15 at 12:15
  • Then, you might want to look at this - http://stackoverflow.com/questions/24061808/google-font-not-working-on-safari – Roysh Jan 26 '15 at 12:22
0

It might be worthwhile applying font smoothing to the body:

* {
    -webkit-font-smoothing: antialiased;
}

Of course you could be more specific but it shouldn't cause any issues applying it globally. I've come across font issues like this a few times and it's helped a lot of the time. It's an easy first step to fixing the problem at least.

thecraighammond
  • 800
  • 6
  • 10
  • I will try with this...but I read in caniuse Safari not suport fonts inf format .woff2 no? I saw the code and google return the font in format .woff2 and .woff...... Maybe can be the problem? – Marcos Jan 26 '15 at 15:12
  • Its true that Safari won't see those fonts, but if you're using Google Font's Safari should be presented with the correct font files to render correctly. – thecraighammond Jan 26 '15 at 15:17
  • I think so this...but I don't understood why works in this way, it's very strange – Marcos Jan 26 '15 at 15:20
  • Are you including the Google Fonts in your HTML using a and then referencing them in your CSS? – thecraighammond Jan 26 '15 at 15:21
  • Yes I've the line to include my fonts with the styles (400,600,700...) – Marcos Jan 26 '15 at 15:27
  • In that case there shouldn't be an issue with Safari not seeing the font. If this were the case you wouldn't see the font rendered at all, not just that it looks a bit strange. Give font-rendering a try and let me know how it turns out. – thecraighammond Jan 26 '15 at 15:29