CODEWITHSUNDEEP
cssfonts
fealiux
fealiux

Reputation: 125

Google Web Font - Distorting

I used Google web fonts for my H1 text and the text looks very pixelated on my screen.

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

    <style media="screen" type="text/css">

    h1 {
    color:#544E4F;
    font-family: 'Forum', cursive;
    text-align:center;
    margin: auto;
    font-size:210%;
    }

    </style>

Thanks in advance!

Upvotes: 1

Views: 3255

Answers (4)

dsuy
dsuy

Reputation: 119

After suffering the same problem for a long time, and after doing a lot of research about it, I finally did the following:

  1. I found http://www.fontsquirrel.com
  2. I downloaded the (pixellated) font I was using (Exo family)
  3. I uploaded it to my site
  4. I referenced it locally to avoid using Google Fonts (you can achieve this by downloading a @font-face Kit that is available at fontsquirrel.com also).

Upvotes: 2

bobince
bobince

Reputation: 536329

It looks OK to me. However note that h1 receives the style:

font-weight: bold;

in most browsers' default style sheets. Since you only have a normal-weight variant of the font available, the browser has to synthesise the bold weight automatically from the normal. There are various different methods of auto-bolding of varying levels of quality, but it's never going to look as good as a real designed bold. Maybe you are getting a poorly-synthesised font variant.

If you want to use Forum for headings I suggest adding the rule:

font-weight: normal;

which will allow the browser to use the regular, unmolested font. Alternatively if you really do want that bold, best choose a different font that does actually have a bold weight.

Another possibility is that you've got anti-aliasing turned off at a system level, and it's being overridden for your normal browser font but not for web fonts. If that's the problem then you could try to override for everything else using eg:

font-smooth: always;
-webkit-font-smoothing: antialiased;

although it's questionable whether it's really a good idea to be ignoring the user's preferences, and also arguable whether it should be subpixel-antialiased instead for WebKit...

Upvotes: 1

Brad
Brad

Reputation: 241

Try adding this:

h1 {
text-shadow:0 0 1px transparent;
}

Upvotes: 0

Brad
Brad

Reputation: 241

Well I'm just throwing these out there, but..

My best guess is to use em rather than % for your font size. Such as, font-size:4.5em.

Maybe try using a div instead of h1, though I doubt that would do much of anything.

Upvotes: 0

Related Questions