How to import fonts in CSS?
I want to use some fonts and I want it to work without having this font on the client computer. I have done this but it doesn’t work:
6 Answers 6
Following lines are used to define a font in css
Following lines to define/use the font in css
One of the best source of information on this topic is Paul Irish’s Bulletproof @font-face syntax article.
Read it and you will end with something like:
When I went to Google fonts all they gave me were true type font files .ttf and didn’t explain at all how to use the @font-face to include them into my document. I tried the web font generator from font squirrel too, which just kept running the loading gif and not working. I then found this site —
I had great success using the following method:
I selected the Add Fonts button, leaving the default options, added all of my .ttf that Google gave me for Open Sans (which was like 10, I chose a lot of options. ).
Подключаем веб-шрифты
Если на сайте используется шрифт, которого не окажется на устройстве пользователя (компьютер, ноутбук, планшет, смартфон), то шрифт будет заменён на стандартный. Следовательно дизайн не будет соответствовать действительности, а во многих случаях вёрстка ломается и выглядит некорректно
При подключении шрифта эта проблема решается, так как вместе с сайтом, загружаются используемые шрифты и сайт отображается корректно
Рассмотрим два способа подключить веб-шрифты
- Подключить веб-шрифт со стороннего сервиса, например Google Fonts через <link>
- Подключить файлы шрифтов через @font-face
Подключение веб-шрифтов с Google Fonts
Google Fonts содержит большое количество бесплатных шрифтов, которые часто используются в дизайне макетов
Заходим на официальный сайт Google Fonts и выбираем шрифт
Далее выбираем начертания веб-шрифта, например Regular (стандартной толщины) и Light (чуть более узкий, чем стандартный) — нажимаем на + Select this style. (Если нужно снять выбор — нажимаем на — Remove this style)
В правом верхнем углу нажимаем на иконку выбранных шрифтов
В открывшемся окне выбираем способ подключения <link> и копируем код расположенный ниже
Вставляем скопированный код в <head></head>
Чуть ниже копируем CSS свойство для использования подключеного шрифта
Используем подключенный шрифт в файле стилей CSS
Удобство данного способа в том, что добавив только одну строку в <head>, сразу можно использовать данный шрифт
Минусом этого способа является зависимость от сервиса Google Fonts. Если сервис перестанет работать, то подключенные шрифты не загрузятся
Данный способ полезен при создании быстрых прототипов верстки, для своих проектов/экспериментов
Подключение через @font-face
В дизайн макете сайта может быть использован нестандартный шрифт, который недоступен в Google Fonts. В таких случаях дизайнер вместе с дизайн макетом предоставляет файлы используемых шрифтов или скачиваете шрифт самостоятельно
Google Fonts также позволяет скачивать бесплатные шрифты, чтобы хранить на хостинге вместе с проектом и подключать их через @font-face
На странице выбранного шрифта, сверху справа нажимаем на кнопку Download family
Разархивируем скачанный zip-файл и видим файлы выбранного шрифта всех возможных его начертаний в формате *.ttf
У веб-шрифта должен быть определенный формат, который будет поддерживаться браузерами. На данный момент самый оптимальный формат веб-шрифтов — *.woff (Поддержка формата WOFF)
Чтобы конвертировать файлы формата *.ttf в формат *.woff воспользуемся бесплатным онлайн сервисом Transfonter
Переходим на официальный сайт сервиса Transfonter и нажимаем кнопку Add fonts
В открывшемся окне ищем папку в которую был разархивирован скачанный zip-файл, и выбираем необходимые начертания шрифта
Выбранные начертания шрифта будут загружены в сервис для конвертирования
Ниже расположены настройки конвертирования. Справа в списке форматов шрифтов выбираем только формат WOFF. Все остальные настройки оставляем по-умолчанию
Далее нажимаем кнопку Convert
После того, как шрифты будут сконвертированы, ниже слева появится ссылка Download для скачивания
Скачанный zip-файл содержит сгенерированные стили CSS для подключения шрифтов и *.woff файлы шрифтов
Файлы шрифтов копируем в папку fonts нашего проекта. Названия файлов шрифтов не изменяем.
Файл stylesheet.css содержит следующие сгенерированные стили
Копируем все содержимое файла stylesheet.css в самое начало нашего основного файла стилей CSS.
Так как основной файл стилей находится в папке css, отличной от папки, где лежат файлы шрифтов, необходимо внести некоторые изменения — в url добавляем относительный путь до папки fonts (остальные свойства не меняем)
Аналогично используем подключенный шрифт в файле стилей CSS
Преимущество данного способа в том, что веб-шрифты храняться на хостинге вместе с проектом, и не зависят от сторонних сервисов
Как подключить шрифт к сайту html из папки
Не всегда стандартные встроенные шрифты, как Arial или Verdana, могут быть удобны. Нередко встречается ситуация, когда веб-дизайнер хочет воспользоваться возможностями какого-то другого шрифта, которого нет среди встроенных, но который доступен из внешнего файла. Такой шрифт можно подключить с помощью директивы font-face :
Свойство font-family задает название шрифта, а свойство src — путь к шрифту.
В данном случае веб-страница будет подгружать шрифт, который расположен в интернете по адресу http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2
В качестве альтернативы мы можем загрузить файл шрифта на локальный компьютер и уже оттуда подгружать его на веб-страницу. Как правило, для хранения своих шрифтов рядом с веб-страницей создается папка fonts :
После подключения шрифта, его можно использовать в стилях:
В данном случае используется шрифт Roboto, созданный компанией Google и определенный в файле в формате woff2. Однако не все браузеры поддерживают данный формат шрифтов.
Грубо говоря, существует несколько различных форматов шрифтов: TrueType( расширение ttf), Open Type (расширение otf), Embedded Open Type (расширение eot), Web Open Font Format (woff/woff2), Scalable Vector Graphic (svg). Разные браузеры могут поддерживать разные шрифты. И чтобы решить проблему поддержки шрифтов создатели шрифта часто создают сразу несколько форматов. И мы можем сразу эти форматы определить. Например:
Как и в предыдущем случае свойства font-family и src задают название и путь к шрифту. Но теперь также для совместимости добавляется еще одно свойство src . Второе свойство src устанавливает сразу несколько шрифтов. Первым шрифтом также идет шрифт в формате EOT, но теперь к расширению файла .eot добавляется значение ?#iefix . Это делается для совместимости с версиями Internet Explorer 6–8. Если после .eot не будет добавляться это значение, то шрифт может неправильно отображаться в Internet Explorer 6-8.
После параметра url идет определение формата шрифта:
Когда браузер начнет загружать веб-страницу, на которой таким образом определен шрифт, то браузер не будет подгружать все шрифты во всех форматах, а загрузит только первый шрифт, который для него окажется понятным.
Разные версии шрифта
Загрузим шрифт Roboto по ссылке Roboto на локальный компьютер. Распакуем загруженный архив в папку, которую назовем fonts, и положим эту папку в один каталог рядом с веб-страницей. В загруженной папке шрифта Roboto мы сможем увидеть, что она содержит не один файл, а сразу несколько:
Зачем нам столько файлов? Дело в том, что каждый шрифт должен определять отдельный стиль для обычного текста, для текста, выделенного курсивом, для текста, выделенного жирным, для текста, сочетающего выделение жирным и курсивом и т.д.
Чтобы браузер мог автоматически распознавать разные варианты шрифта, к директиве @font-face добавляются свойства font-weight и font-style , которые соответственно устанавливают выделение жирным и выделение курсивом:
Поскольку версия шрифта Roboto-Regular.ttf применяется для текста, не выделенного курсивом и жирным, то вместе с ним устанавливаются значения:
То есть тем самым мы устанавливаем, что выделения курсивом не будет ( font-style: normal; ) и выделения жирным не будет ( font-weight: normal; )
Кроме версии Roboto-Regular.ttf , как видно выше на картинке, в папке есть еще другие версии шрифта Roboto. Например, курсивная версия шрифта Roboto-Italic.ttf и ряд других.
Если мы хотим, чтобы при выделении курсивом браузер использовал именно курсивную версию, то нам надо добавить еще одну директиву font-face:
Значение font-style: italic указывает, что данную версию шрифта следует применять при выделении курсивом.
Аналогично мы можем задать те версии шрифта, которые должны использоваться при выделении сразу и жирным, и курсивом, либо только при выделении жирным:
Значение font-weight: bold указывает, что данная версия шрифта применяется при выделении жирным.
Теперь используем все эти шрифты:
Теперь к тексту в тегах <i></i> , который использует курсив, будет применяться версия «Roboto-Italic.ttf», а к тексту в тегах <b></b> — шрифт «Roboto-Bold.ttf».
Источники шрифтов
В интернете можно найти множество нестандартных шрифтов. Наиболее популярным репозиторием шрифтов является https://www.google.com/fonts/ — набор шрифтов от компании Google.
Также другим известным репозиторием шрифтов является Font Squirrel.
Следует также упомянуть такой популярный шрифт как FontAwesome. Он предоставляет множество различных интересных иконок, которые можно использовать на веб-странице.
Подключение шрифтов в CSS
Чтобы использовать на сайте какой-либо нестандартный шрифт (которого может не оказаться на компьютере пользователя), его необходимо подключить. Как это сделать?
Коллекция Google Fonts
Проще всего использовать сервис Google Fonts. Там достаточно выбрать подходящий шрифт из богатой коллекции, кастомизировать его (подобрать нужные начертания и языки) и получить готовую ссылочку. Выглядеть она будет примерно так:
в зависимости от способа подключения (в HTML или в CSS).
В обоих случаях сама ссылка одна и та же, отличается лишь обертка. Она должна подключить на сайт шрифт семейства Open Sans стандартного, жирного и курсивного начертания с латинскими (по умолчанию) и кириллическими символами. Скопируем ее в адресную строку браузера и посмотрим, как это работает. (можно перейти по ссылке)
Мы видим много-много строк текста, разбитых на сегменты. Да, примерно так шрифты к веб-страницам и подключаются.
Самостоятельное подключение
Не все шрифты можно найти на Google Fonts, плюс иногда хочется, чтобы подгрузка ресурсов не зависела от стороннего сервиса, пусть даже такого надежного, как Google. Ну и в конце концов, верстальщик должен уметь подключать шрифты ��
Основная проблема при работе со шрифтами — это разнообразие форматов. Если вы скачаете любой шрифт с того же самого Google Fonts, вы получите плотненький архивчик, содержащий обычно целых три (а то и больше) разных файла для одного и того же начертания.
Не будем вдаваться в подробности, какой браузер какой формат желает видеть, это тема для отдельной статьи. Просто примем как факт то, что для нормальной работы нам нужен и .eot , и .woff и даже таинственный .ttf .
Каждое начертание нужно будет указать отдельным правилом. Если требуется подключить обычный, жирный, курсивный и жирный курсивный виды шрифта, придется написать четыре инструкции.
Настройки шрифта
Каждое правило будет выглядеть примерно так:
С правилами font-weight и font-style все понятно, их нужно прописать для каждого начертания нужного шрифта. Font-family при этом остается неизменной. Именно указанное здесь имя будет использоваться во всех css-инструкциях для применения этого шрифта.
В моем случае css-файл начнется следующим образом:
Если указать правильные адреса файлов и установить для какого-нибудь элемента жирный курсивный шрифт Open Sans, браузер обратится к файлу *font4-url, так как именно он содержит нужное начертание.
Это самые базовые настройки, можно указать любые другие допустимые в CSS характеристики шрифтов, например, font-variant или font-stretch . Можно и вообще никаких настроек не указывать, ограничиться только названием и адресом файла.
Файлы шрифта
Теперь обратимся непосредственно к файлам.
В качестве значения свойства src необходимо указать все файлы, содержащие разные форматы шрифта, перечислив их имена через запятую. Браузер будет перебирать их по одному, пока не встретит подходящий. Чтобы ему не приходилось загружать каждый файл для ознакомления, рядом обычно указывают формат в качестве подсказки.
Для нашего любимого Internet Explorer организуем особое подключение.
Локальное подключение
Есть еще одна отличная опция, позволяющая до начала загрузки проверить, есть ли нужный шрифт на компьютере пользователя. В этом случае даже грузить ничего не придется, что позволит оптимизировать работу сайта. Для этого используется функция local() , которая идет самой первой в списке шрифтов. Можно указывать сразу несколько проверок с разными вариантами названия.
Не всегда все необходимые форматы и разновидности шрифта есть в наличии. В этом случае можно использовать только имеющиеся, а браузер при необходимости постарается дорисовать то что есть (например, для создания курсивного начертания) или использует запасной шрифт.