Geek Answers Handbook

Defining a font with small caps with @ font-face

How to add the font of a small cover as an option?

Im uses Jos Buivengas Fontin, which has the option with small caps as a separate font, and not as a function of the OpenType style. This CSS snippet correctly defines regular, bold, and italic fonts in the family, but not small caps. How can I do this job?

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ @font-face { font-family: "Fontin"; src: url(../Fonts/Fontin-Regular.ttf) format("truetype"); } @font-face { font-family: "Fontin"; font-style: italic; src: url(../Fonts/Fontin-Italic.ttf) format("truetype"); } @font-face { font-family: "Fontin"; font-weight: bold; src: url(../Fonts/Fontin-Bold.ttf) format("truetype"); } @font-face { font-family: "Fontin"; font-variant: small-caps; src: url(../Fonts/Fontin-SmallCaps.ttf) format("truetype"); }

Related: How to add multiple font files for the same font? and Correctly define the font family in @ font-face CSS .

+4
source share
1 answer

Unfortunately, it seems that an effective way is to fake the small-cover font as a font family by declaring it, for example,

 @font-face { font-family: "Fontin Small Caps"; src: url(Fontin-SmallCaps.ttf) format("truetype"); }

(note the lack of setting font-style , by default to normal ) and using a rule like

 p { font-family: Fontin Small Caps; }

without installing font-style .

Testing in a logical way, as described in the question, and using the .ttf font from http://www.exljbris.com/fontin.html , I noticed that Firefox, Chrome, Opera all use "fake small caps" (i.e. reduced capital letters) when I installed font-family: Fontin; font-variant: small-caps; font-family: Fontin; font-variant: small-caps; . This is sad, but not surprising.

It is strange that Firefox and Opera, but not Chrome, use the font of the small Fontin cover when I install only font-family: Fontin . This does not happen if I remove the @font-face rule that has font-style: small-caps . Thus, browsers are really hostile to the logical path using small capitals.

+8
source

More articles:


All Articles