Как подключить скачанные шрифты css
Подключение шрифтов в CSS
Если не вникать в подробности, по быстрому подключить шрифт можно так:
Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:
Локальные шрифты
Правило @font-face src позволяет задать название локального шрифта, т.е. если у пользователя на компьютере уже установлен нужный шрифт, то будет использоваться именно он, при этом существенно увеличится скорость загрузки и отрисовки страницы.
Можно указать несколько названий:
Форматы шрифтов
Сегодня используются четыре формата, рассмотрим их подробнее:
TTF/OTF – работают в большинстве браузеров, кроме IE.
EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.
WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.
WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.
Как видно нет единого формата, который поддерживается всеми браузерами, поэтому нужно делать подключение нескольких файлов, браузер сам выберет подходящий формат. Рекомендуется подключать файлы шрифтов по приоритету:
Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов onlinefontconverter.com или convertio.co.
Разные начертания шрифтов
Пример подключения шрифта «Crimson Text» в разных начертаниях:
Как подключить шрифт на сайт в CSS
Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в CSS? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.
Как подключить шрифт на сайт в CSS
Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках h1 нашего сайта. Для этого выполняем следующие действия:
В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;
В самом низу файла стилей style.css прописываем правило:
А также в файле стилей задаём правило для всех заголовков:
Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.
Если вы хотите подключить несколько шрифтов или их начертаний, то просто добавьте их под предыдущим:
Обычно каждый шрифт подключается сразу в 3-х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в том числе и старых. Выглядит это так:
Здесь следует обратить внимание на порядок подключения — это важно!
Не будем вдаваться в подробности, просто запомните вид этой конструкции.
Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них.
Как подключить шрифт с помощью различных сервисов
Также можно воспользоваться сервисом fonts4web для подключения шрифтов:
Самый простой способ подключения шрифтов
Как подключить шрифт к шаблону Moguta.CMS
Как добавить ссылку с Google Fonts в шаблон Moguta CMS
Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы в группе или комментариях.
Подключение шрифтов в CSS
Чтобы использовать на сайте какой-либо нестандартный шрифт (которого может не оказаться на компьютере пользователя), его необходимо подключить. Как это сделать?
Коллекция Google Fonts
Проще всего использовать сервис Google Fonts. Там достаточно выбрать подходящий шрифт из богатой коллекции, кастомизировать его (подобрать нужные начертания и языки) и получить готовую ссылочку. Выглядеть она будет примерно так:
в зависимости от способа подключения (в HTML или в CSS).
В обоих случаях сама ссылка одна и та же, отличается лишь обертка. Она должна подключить на сайт шрифт семейства Open Sans стандартного, жирного и курсивного начертания с латинскими (по умолчанию) и кириллическими символами. Скопируем ее в адресную строку браузера и посмотрим, как это работает. (можно перейти по ссылке)
Мы видим много-много строк текста, разбитых на сегменты. Да, примерно так шрифты к веб-страницам и подключаются.
Самостоятельное подключение
Не все шрифты можно найти на Google Fonts, плюс иногда хочется, чтобы подгрузка ресурсов не зависела от стороннего сервиса, пусть даже такого надежного, как Google. Ну и в конце концов, верстальщик должен уметь подключать шрифты 🙂
Основная проблема при работе со шрифтами — это разнообразие форматов. Если вы скачаете любой шрифт с того же самого Google Fonts, вы получите плотненький архивчик, содержащий обычно целых три (а то и больше) разных файла для одного и того же начертания.
Каждое начертание нужно будет указать отдельным правилом. Если требуется подключить обычный, жирный, курсивный и жирный курсивный виды шрифта, придется написать четыре инструкции.
Настройки шрифта
Каждое правило будет выглядеть примерно так:
С правилами font-weight и font-style все понятно, их нужно прописать для каждого начертания нужного шрифта. Font-family при этом остается неизменной. Именно указанное здесь имя будет использоваться во всех css-инструкциях для применения этого шрифта.
В моем случае css-файл начнется следующим образом:
Если указать правильные адреса файлов и установить для какого-нибудь элемента жирный курсивный шрифт Open Sans, браузер обратится к файлу *font4-url, так как именно он содержит нужное начертание.
Файлы шрифта
Теперь обратимся непосредственно к файлам.
В качестве значения свойства src необходимо указать все файлы, содержащие разные форматы шрифта, перечислив их имена через запятую. Браузер будет перебирать их по одному, пока не встретит подходящий. Чтобы ему не приходилось загружать каждый файл для ознакомления, рядом обычно указывают формат в качестве подсказки.
Для нашего любимого Internet Explorer организуем особое подключение.
Локальное подключение
Не всегда все необходимые форматы и разновидности шрифта есть в наличии. В этом случае можно использовать только имеющиеся, а браузер при необходимости постарается дорисовать то что есть (например, для создания курсивного начертания) или использует запасной шрифт.
Свой шрифт на странице
Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.
Если у вас на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку.
Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам
. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.
Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.
Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.
В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.
| Формат | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| TTF | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| EOT | 5.0-8.0 | ||||||
| WOFF | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
Самый поддерживаемый формат — TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).
Пример 1. Подключение TTF
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Заголовок с загруженным шрифтом
Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.
Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда — файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных мной сайтов оказался один, показавший текст в IE правильно.
src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local(‘bla bla’), url(fonts/pompadur.ttf);
Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.
Пример 2. Подключение EOT
HTML5 CSS3 IE Cr Op Sa Fx
Что касается iOS, то делать и загружать отдельный шрифт в формате SVG как мне кажется нет особого смысла. Аудитория сайтов просматривающая его через iOS пока невелика, к тому же версию сайта под мобильные устройства стараются облегчить, и загружать дополнительные несколько десятков килобайт не желательно.
Google Web Fonts
Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts. Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.
Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).
Рис. 2. Выбор шрифтов в Google Web Fonts
Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.
Рис. 3. Загружаемые на страницу шрифты
Подключить выбранные шрифты можно одним из трёх путей, добавляемый код можно скопировать ниже по странице.
3. Через JavaScript.
В принципе, все пути равноценны, так что выбирайте по своему предпочтению.
Преимущества применения данного сервиса такие.
Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.
Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.
Подключение шрифтов из папки. CSS свойство font-face.
Есть разные способы подключения нестандартных шрифтов к сайту. Скриптом, с помощью сервиса Google fonts или из локальной папки сайта. Для реализации последнего из способов используют CSS-правило @font-face.
Одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишут в font-weight и font-style.
Для современных браузеров нужны форматы woff2 и woff. Вначале указывается путь к файлу woff2, затем к woff. Таким образом, если браузер умеет работать с более современным форматом шрифтов, то он применит его. Если нет, то возьмет формат woff.
Теперь этот шрифт можно применять к нужным блокам. Для разной жирности или начертания браузер будет подтягивать нужные файлы для правильного отображения.
Обязательно указывайте запасной веб-безопасный шрифт и семейство.
Свойство unicode-range
CSS свойство unicode-range задает определенный диапазон символов для шрифта, определенного в @font-face и доступного для использования на странице. Если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.
Т.е. если у вас есть несколько файлов шрифта с заданными диапазонами, то загрузятся только те файлы, которые нужны для отображения набора символов на странице.
Обратите внимание, что unicode-range не разбивает сам шрифтовой файл, он только показывает нужно ли загружать этот файл, есть ли соответствующие ему символы.
Зачем может понадобится это свойство? Например, для мультиязычных сайтов. Чтобы не грузить пользователю шрифт в котором есть символы для всех нужных языков, можно сделать шрифтовые файлы под каждый
Для подключения кириллицы:
Как это работает? Браузер анализирует ваш DOM и понимает какие символы используются на сайте и, если есть совпадение, то шрифт закачивается. В данном примере, если на сайте есть кириллица, то lato-light.cyrillic.woff2 будет загружен и отрисуется, а шрифт lato-light.latin.woff2 даже не закачается.
Или другой пример: вот таким способом можно применить другой шрифт только к цифровым символам:
Примечание: не работает с шрифтами подключенными через 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