0

How does it come that Google fonts work fine in IE and FF but not in Chrome? Kind of funny that it doesn't work in their own browser

see the picture (chrome on top)

enter image description here

the example comes from this page http://www.europeanhairtransplant.se

I'm using the font Magra. Am I doing something wrong?

HTML

<link href='http://fonts.googleapis.com/css?family=Magra' rel='stylesheet' type='text/css'>

CSS

h1, h2, h3, h4, h5, h6 {
    font-family: "Magra", Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}

UPDATE:

Since Chrome released version 32 the other day it looks better but still not as good as in FF or IE http://imagizer.imageshack.us/v2/800x600q90/203/8esa.png

WIRN
  • 915
  • 1
  • 16
  • 31
  • Self-terminating tags are not a part of standard HTML, only XHTML. That alone will not cause a problem. – Ken Franqueiro Nov 18 '13 at 20:22
  • 1
    Works for me. @Legionar HTML5 is not as strict as XHTML 1.1, so the `` is perfectly fine without the slash. – Diego Agulló Nov 18 '13 at 20:22
  • Looks fine for me in Chrome 32.0.1700.14 beta-m Aura: http://i.imgur.com/45QazLl.png – gen_Eric Nov 18 '13 at 20:24
  • 3
    It actually looks like it is working (look at the lowercase `L` in Transplant). It looks like the weight is set to bold. – Jason Sperske Nov 18 '13 at 20:25
  • As above, I think it might be a weight issue. One thing to consider though is using the @import declaration instead of the link tag to ensure that the font is loaded before your CSS declarations are. It might not make a difference, but it simplifies your HTML and I personally find it makes maintaining the stylistic aspects separately from your markup a cleaner process. – moberemk Nov 18 '13 at 20:27
  • Works for me in Chrome, too. – Rob Nov 18 '13 at 20:31
  • Hasn't this been a well known issue for a *while* now that Chrome renders Google Web Fonts weird? https://www.google.com/search?q=chrome+google+web+font+rendering&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a – patricksweeney Nov 18 '13 at 20:55

2 Answers2

0

You're probably not loading the correct font-weights for that font. E.g. you only load the default (400) weight right now and if you then make something bold, the browser will fake the bold effect, because it can't find the actual bold font-file.

The font you chose only comes in 400 and 700 weights, so you might be better off finding a font with more weights (how about Ubuntu?).

A lot of browsers will be able to render the font fine regardless, but there might be some differences between platforms, so better play it safe.

Reinier Kaper
  • 1,079
  • 1
  • 8
  • 17
0

The difference (which cannot be seen on Chrome 31) has apparently been caused by font weight issues. If you do not set the font weight of an h1 element, the browser default of bold (= 700) is used. Since your code only calls for Magra without specifying weights, only normal (= 400) weight typeface is loaded. Browsers will then deal with this in different ways. They may use the normal typeface as such, or they may algorithmically bold it (which usually leads to poor results).

It is impossible to decide what happened when you took the screenshot. Sufficient code was not disclosed. The URL mentioned contains, at least now, a declaration that sets font weight to 500, which is illogical (the font only has 400 and 700 weights). I suspect that the screenshot is actually from a different version of the page.

Anyway, you just need to decide on the weight and use it consistently. Assuming you want to use Magra, you have just normal and bold (see Google instructions on the font). If you want normal weight, as it seems, just change the font weight declaration to

font-weight: normal;

And if you want bold face, remove the font-weight declaration entirely, or replace it by

font-weight: bold;

and change the link element so that it asks for both normal and bold typeface (drop 400, if you only want bold typeface):

<link href='http://fonts.googleapis.com/css?family=Magra:400,700' 
      rel='stylesheet'>
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I've changed to 400 now but it still looks weird – WIRN Nov 19 '13 at 15:20
  • @WIRN, changed where, and what looks weird and how? Do you really see what the screenshot in the question shows, manifestly bold? Which version of Chrome, which platform? Or are you referring to the *quality* of font rendering (like smoothness of strokes)? – Jukka K. Korpela Nov 19 '13 at 19:20
  • Where we talked about, the header (h1). It doesn't render as as It should i Chrome, I'm sorry, no disrespect, and I'm grateful for all help and all, but if you don't see it you should see an optician. I'm using chrome 31 on win 8. Here is another example http://flottiljenbrf.se – WIRN Nov 19 '13 at 19:36
  • That’s not at all what you have in the first image, and I don’t mean just content. – Jukka K. Korpela Nov 19 '13 at 19:56