After I saw inappropriate use of font-face in my colleagues' code:
font-weight: normal;
font-family: BrutalType-Bold, sans-serif;
I realized that something was wrong in the Danish kingdom. Most likely, one article will not cover everything, but let's just get started.
Let's say you are going to connect a font in 2021. After reading about how bad everything is (in fact, not) with the Google Fonts service, we decided to connect it locally. Purchased (of course) a font package, unpacked it and saw the following:
, . , ( ). – @font-face.
CSS : (font-family), (, font-weight), (font-style), (, font-stretch), (font-variant) (, font-size).
: @font-face , , CSS .
, , : normal, italic oblique. italic oblique . , italic – , , ( ), oblique – , . .
, : normal italic. Italic It – "", italic (MyriadPro-BoldSemiCnIt.otf, MyriadPro-It.otf). Oblique Ob (Obl), - .
. CSS 100 900 : normal (400), bold (700). bolder lighter, @font-face !
: Light (100, MyriadPro-Light.otf), Book (300), Regular (400, MyriadPro-Regular.otf), Medium (500), Semibold (600), Bold (700, MyriadPro-Bold.otf), Black (Solid, 900, MyriadPro-BlackCond.otf). Black , . , .
– font-stretch, . -, . - : ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded ( ).
, : Cond, Cn – condensed (, MyriadPro-Cond.otf, MyriadPro-LightCond.otf), SemiCond, SemiCn – semi-condensed (, MyriadPro-SemiCn.otf), SemiExt – semi-extended (, MyriadPro-SemiExtIt.otf) .
font-variant, : normal small-caps ( ). , .
. (woff2 opentype/otf):
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-Regular.woff2) format(woff2),
url(MyriadPro-Regular.otf) format(opentype);
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-variant: normal;
}
- :
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-BlackSemiExtIt.woff2) format(woff2),
url(MyriadPro-BlackSemiExtIt.otf) format(opentype);
font-weight: 900;
font-style: italic;
font-stretch: semi-extended;
font-variant: normal;
}
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-BlackSemiCn.woff2) format(woff2),
url(MyriadPro-BlackSemiCn.otf) format(opentype);
font-weight: 900;
font-style: normal;
font-stretch: semi-condensed;
font-variant: normal;
}
, . ! , "MyBestSiteDuckingFontEver".
:
.ex-heart {
font-family: MyriadPro, sans-serif;
font-weight: 900;
font-stretch: semi-extended;
font-style: italic;
}
.ex-soul {
font-family: MyriadPro, sans-serif;
font-weight: 900;
font-stretch: semi-condensed;
font-style: normal;
}
MyriadPro-BlackSemiExtIt.woff2 ( otf, ), – MyriadPro-BlackSemiCn.woff2. , , MyriadPro-Regular.woff2. : , . Chrome.
If the Regular file is not found, then the system sans-serif font is used, it is worth writing a separate article about the order of choosing local fonts.
I hope I was able to explain the basics of working with font collections and you will no longer write code like my colleagues. It remains to explain this to them.