0

I'm using josefin sans font from Google fonts. It looks crisp and sharp on their website and consistently so for all browsers. But when I import the fonts to my site via linking to provided css file , they look thin and blurry. I know about some fixes you can do, but they don't work consistently. why does this happen? Does putting these fonts locally help ?

nuway
  • 2,324
  • 4
  • 27
  • 48
  • What format are they in? – Moonhead Oct 23 '14 at 00:31
  • What is the CSS that you are using to import the font files? – Esteban Felix Oct 23 '14 at 00:45
  • i import them using the google provided and i use them using something like font-size: 11px; font-family: "Josefin Sans"; font-weight: 300; font-style: normal; color: white; text-align: center; text-transform: uppercase; – nuway Oct 23 '14 at 00:50
  • @nuway I'm not sure but I think you need a "//" or "http://" before the `href` cause it might be pointing to a local file instead of the Google Fonts server. – Slava Knyazev Oct 23 '14 at 01:30

2 Answers2

0

Each font (or almost each) hash a few "sub-fonts" if you will which are slight variations of the original font. Make sure you select the one you really want. Look at the variations: Josefin Sans

Slava Knyazev
  • 5,377
  • 1
  • 22
  • 43
  • Yes. I was under impression you can only set the font weight. Can I set the light, regular or semi-bold attributes, and if so, with what CSS property? – nuway Oct 23 '14 at 00:34
  • 1
    @nuway Those are one and the same. You basically choose the 'weight' that you would like to choose as those. In this case it's: 300, 400, and 600 respectively. – Esteban Felix Oct 23 '14 at 00:45
  • @EstebanFelix Google Fonts default settings when choosing a font is 300 I believe so he might not have selected the correct one. – Slava Knyazev Oct 23 '14 at 00:49
  • @nuway Well you can also set bold, italic and so on but that is within `familiy-font` property in css – Slava Knyazev Oct 23 '14 at 00:50
  • so you're saying its font-family: "Josefin Sans Regular"; font-weigth:400; to get the font listed under regular-400? btw, the fonts dont look too good in your screenshot – nuway Oct 23 '14 at 00:53
  • @nuway Did you also make sure to include the fonts as being loaded? By default I believe only 300 is included which could explain the lack of anti-aliasing. – Esteban Felix Oct 23 '14 at 00:54
  • @nuway well it's a screen shot.... It was only to show which ones are included where. And no, you use the same way you just set `bold` or `italic` in the appropriate place. – Slava Knyazev Oct 23 '14 at 00:54
  • @ViruZX what is the appropriate place? can you show me exactly? – nuway Oct 23 '14 at 01:09
0

Did you make sure to include all of the needed font files?

Your CSS link should look something like this:

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600' rel='stylesheet' type='text/css'>

Esteban Felix
  • 1,561
  • 10
  • 21