+7 (812) 9-515-415

Подключение шрифтов из папки. CSS свойство font-face.

Есть разные способы подключения нестандартных шрифтов к сайту. Скриптом, с помощью сервиса Google fonts или из локальной папки сайта. Для реализации последнего из способов используют CSS-правило @font-face.

Одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишут в font-weight и font-style.

Для современных браузеров нужны форматы woff2 и woff. Вначале указывается путь к файлу woff2, затем к woff. Таким образом, если браузер умеет работать с более современным форматом шрифтов, то он применит его. Если нет, то возьмет формат woff.

 


        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2")
        url("fonts/opensans.woff") format("woff") ;
        font-weight: normal;
        font-style: normal;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        }

Теперь этот шрифт можно применять к нужным блокам. Для разной жирности или начертания браузер будет подтягивать нужные файлы для правильного отображения.

 


    div {
      font-family: OpenSans, Arial, sans-serif;
      font-weight: bold;
    }

 

Обязательно указывайте запасной веб-безопасный шрифт и семейство.

font-weight - соответствие слов и чисел

100 - Thin (Hairline)
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

Свойство unicode-range

CSS свойство unicode-range задает определенный диапазон символов для шрифта, определенного в @font-face и доступного для использования на странице. Если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.

Т.е. если у вас есть несколько файлов шрифта с заданными диапазонами, то загрузятся только те файлы, которые нужны для отображения набора символов на странице.

Обратите внимание, что unicode-range не разбивает сам шрифтовой файл, он только показывает нужно ли загружать этот файл, есть ли соответствующие ему символы.

Зачем может понадобится это свойство? Например, для мультиязычных сайтов. Чтобы не грузить пользователю шрифт в котором есть символы для всех нужных языков, можно сделать шрифтовые файлы под каждый

Для подключения кириллицы:


@font-face {
    font-display: swap;
    font-family: 'Lato';
    src: url('/fonts/lato-light/lato-light.cyrillic.woff2') format('woff2'),
        url('/fonts/lato-light/lato-light.cyrillic.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица
}

Как это работает? Браузер анализирует ваш DOM и понимает какие символы используются на сайте и, если есть совпадение, то шрифт закачивается. В данном примере, если на сайте есть кириллица, то lato-light.cyrillic.woff2 будет загружен и отрисуется, а шрифт lato-light.latin.woff2 даже не закачается.

Или другой пример: вот таким способом можно применить другой шрифт только к цифровым символам:


@font-face {
    font-family: Georgia;
    src: url('fonts/fontin_sans_regular.eot');
    src: url('fonts/fontin_sans_regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontin_sans_regular.woff2') format('woff2'),
         url('fonts/fontin_sans_regular.woff') format('woff'),
         url('fonts/fontin_sans_regular.ttf') format('truetype'),
         url('fonts/fontin_sans_regular.svg#drevodel_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'drevodel_regular';
    src: url('fonts/drevodel_regular.eot');
    src: url('fonts/drevodel_regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/drevodel_regular.woff2') format('woff2'),
         url('fonts/drevodel_regular.woff') format('woff'),
         url('fonts/drevodel_regular.ttf') format('truetype'),
         url('fonts/drevodel_regular.svg#drevodel_regular') format('svg');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+30-39;
}

Примечание: не работает с шрифтами подключенными через Google fonts, необходимо локальное подключение.

0020 — 007F
Basic Latin
2580 — 259F
Block Elements
00A0 — 00FF
Latin-1 Supplement
25A0 — 25FF
Geometric Shapes
0100 — 017F
Latin Extended-A
2600 — 26FF
Miscellaneous Symbols
0180 — 024F
Latin Extended-B
2700 — 27BF
Dingbats
0250 — 02AF
IPA Extensions
27C0 — 27EF
Miscellaneous Mathematical Symbols-A
02B0 — 02FF
Spacing Modifier Letters
27F0 — 27FF
Supplemental Arrows-A
0300 — 036F
Combining Diacritical Marks
2800 — 28FF
Braille Patterns
0370 — 03FF
Greek and Coptic
2900 — 297F
Supplemental Arrows-B
0400 — 04FF
Cyrillic
2980 — 29FF
Miscellaneous Mathematical Symbols-B
0500 — 052F
Cyrillic Supplementary
2A00 — 2AFF
Supplemental Mathematical Operators
0530 — 058F
Armenian
2B00 — 2BFF
Miscellaneous Symbols and Arrows
0590 — 05FF
Hebrew
2E80 — 2EFF
CJK Radicals Supplement
0600 — 06FF
Arabic
2F00 — 2FDF
Kangxi Radicals
0700 — 074F
Syriac
2FF0 — 2FFF
Ideographic Description Characters
0780 — 07BF
Thaana
3000 — 303F
CJK Symbols and Punctuation
0900 — 097F
Devanagari
3040 — 309F
Hiragana
0980 — 09FF
Bengali
30A0 — 30FF
Katakana
0A00 — 0A7F
Gurmukhi
3100 — 312F
Bopomofo
0A80 — 0AFF
Gujarati
3130 — 318F
Hangul Compatibility Jamo
0B00 — 0B7F
Oriya
3190 — 319F
Kanbun
0B80 — 0BFF
Tamil
31A0 — 31BF
Bopomofo Extended
0C00 — 0C7F
Telugu
31F0 — 31FF
Katakana Phonetic Extensions
0C80 — 0CFF
Kannada
3200 — 32FF
Enclosed CJK Letters and Months
0D00 — 0D7F
Malayalam
3300 — 33FF
CJK Compatibility
0D80 — 0DFF
Sinhala
3400 — 4DBF
CJK Unified Ideographs Extension A
0E00 — 0E7F
Thai
4DC0 — 4DFF
Yijing Hexagram Symbols
0E80 — 0EFF
Lao
4E00 — 9FFF
CJK Unified Ideographs
0F00 — 0FFF
Tibetan
A000 — A48F
Yi Syllables
1000 — 109F
Myanmar
A490 — A4CF
Yi Radicals
10A0 — 10FF
Georgian
AC00 — D7AF
Hangul Syllables
1100 — 11FF
Hangul Jamo
D800 — DB7F
High Surrogates
1200 — 137F
Ethiopic
DB80 — DBFF
High Private Use Surrogates
13A0 — 13FF
Cherokee
DC00 — DFFF
Low Surrogates
1400 — 167F
Unified Canadian Aboriginal Syllabics
E000 — F8FF
Private Use Area
1680 — 169F
Ogham
F900 — FAFF
CJK Compatibility Ideographs
16A0 — 16FF
Runic
FB00 — FB4F
Alphabetic Presentation Forms
1700 — 171F
Tagalog
FB50 — FDFF
Arabic Presentation Forms-A
1720 — 173F
Hanunoo
FE00 — FE0F
Variation Selectors
1740 — 175F
Buhid
FE20 — FE2F
Combining Half Marks
1760 — 177F
Tagbanwa
FE30 — FE4F
CJK Compatibility Forms
1780 — 17FF
Khmer
FE50 — FE6F
Small Form Variants
1800 — 18AF
Mongolian
FE70 — FEFF
Arabic Presentation Forms-B
1900 — 194F
Limbu
FF00 — FFEF
Halfwidth and Fullwidth Forms
1950 — 197F
Tai Le
FFF0 — FFFF
Specials
19E0 — 19FF
Khmer Symbols
10000 — 1007F
Linear B Syllabary
1D00 — 1D7F
Phonetic Extensions
10080 — 100FF
Linear B Ideograms
1E00 — 1EFF
Latin Extended Additional
10100 — 1013F
Aegean Numbers
1F00 — 1FFF
Greek Extended
10300 — 1032F
Old Italic
2000 — 206F
General Punctuation
10330 — 1034F
Gothic
2070 — 209F
Superscripts and Subscripts
10380 — 1039F
Ugaritic
20A0 — 20CF
Currency Symbols
10400 — 1044F
Deseret
20D0 — 20FF
Combining Diacritical Marks for Symbols
10450 — 1047F
Shavian
2100 — 214F
Letterlike Symbols
10480 — 104AF
Osmanya
2150 — 218F
Number Forms
10800 — 1083F
Cypriot Syllabary
2190 — 21FF
Arrows
1D000 — 1D0FF
Byzantine Musical Symbols
2200 — 22FF
Mathematical Operators
1D100 — 1D1FF
Musical Symbols
2300 — 23FF
Miscellaneous Technical
1D300 — 1D35F
Tai Xuan Jing Symbols
2400 — 243F
Control Pictures
1D400 — 1D7FF
Mathematical Alphanumeric Symbols
2440 — 245F
Optical Character Recognition
20000 — 2A6DF
CJK Unified Ideographs Extension B
2460 — 24FF
Enclosed Alphanumerics
2F800 — 2FA1F
CJK Compatibility Ideographs Supplement
2500 — 257F
Box Drawing
E0000 — E007F
Tags
К размышлению
Оглавление