CODEWITHSUNDEEP
fontsfont-faceembedded-fonts
stephenmurdoch
stephenmurdoch

Reputation: 34643

Forcing browsers to display bold text when embedded font has normal font-weight

I'm using @font-face to embed the regular variant (i.e. font-weight: normal) of angie sans from typekit.

I like my h1 tags to be bold but don't want to embed an extra variant of the font just for the sake of a few words at the top of each page

So I'm using the regular variant and setting font-weight: bold anyway, whenever I need to.

It works fine (even for italics) but I'm aware that the user's browser is being asked to make a best-guess here and have noticed that Chrome will make individual chars appear slightly fatter than FF when I do things this way. These differences disappear when I embed the bold variant of the font.

So should I stop doing this? Is it advisable to embed the proper bold variant? Should I just change my text colour or shadow instead? Are there any browsers on which this technique backfires where text becomes unreadable?

Upvotes: 1

Views: 180

Answers (1)

Dirk Diggler
Dirk Diggler

Reputation: 865

Embed the bold variant, give it the same font-family name, and a font-weight of bold

Upvotes: 1

Related Questions