CODEWITHSUNDEEP
cssfontsfont-face
CustomX
CustomX

Reputation: 10113

New font doesn't size as it should

So I finally got the Birch font installed on my WordPress site. Now the font isn't sizing as I would expect it to be (click here). I have tried editing font-size, line-height, font-weight, font-style, ... Nothing seems to work. Strange thing is, on iPhone it works like a charm.

In my header I have added this.

<style type="text/css" media="screen, print">
@font-face {
font-family: Birch;
    src: url('../wp-content/themes/zenon-lite/fonts/birch.ttf') format('truetype'),
    url('../wp-content/themes/zenon-lite/fonts/birch.eot') format('embedded-opentype'),
    url('../wp-content/themes/zenon-lite/fonts/birch.woff') format('woff'),
    url('../wp-content/themes/zenon-lite/fonts/birch.svg') format('svg');
font-weight: normal;
font-style: normal;
}

body { font-family: Birch, Tahoma; }
p {font-size: 1.5em;}
</style>

Upvotes: 0

Views: 81

Answers (1)

David Randall
David Randall

Reputation: 770

You've set the font-size on the body but nowhere else. Therefore your typographical elements are being rendered at the browser default size. You need to define the sizes on the individual components too, for example:

CSS:

h1 {
 font-size: 2em;
}
h2 {
 font-size: 1.5em;
}

Upvotes: 1

Related Questions