How to include a font in CSS
Adding a font to a page can be done with both HTML and CSS. Depending on your requirements you can use any of the approaches.
In this article, I will guide you through both approaches in detail of including a font.
Importing a font via HTML
Including a font with HTML is useful when you need to include a Google Font or any other 3rd party font that is hosted on a remote server.
To do that you can use the <link> element with the href attribute that is equal to the URL of the font in the <head> of your page.
Example:
Google Fonts will offer you a ready code snippet that you can insert into your HTML code.
Google Fonts link code snippet
That way you can add multiple fonts to your page. For each font, you can specify a <link> element with a unique URL. However, Google Fonts allows you to select multiple fonts and it will generate a single <link> element with all the fonts included as a URL query.
Google Fonts multiple link code snippet
To then apply an imported font to a text use the font-family property.
Example:
Google Fonts is a fast and easy way to include multiple fonts on your page. However, there are some points you should consider when using this approach, such as:
- The request to the remote server may fail, which will result in a font not being loaded;
- The request response time may take longer than from a self-hosted font, which affects page loading time;
- There can be privacy issues with loading Google Fonts (see GDPR).
Importing a font via CSS
You can also include a font with CSS. This approach is quite handy when you don’t have access to the HTML of the page as well as it is more flexible and allows for more customization.
Using the @import rule
The first way to include a font is to use the @import rule. Inside your CSS file or inside the <style> tag on your page define the @import rule with the specified URL of the font.
Example:
If you’re importing Google Fonts, then like in the example above they provide you with code snippet for the @import .
Google Fonts multiple import code snippet
Use the font-family property the same way when applying the font to the text.
Example:
Defining a font (font in a folder)
If you’re concerned about the page load time or the GDPR related issues, or if you have a custom font that’s not a Google Font, you can self-host a font.
In this case, you’ll need to have the font files stored in a separate folder of your project.
Font folder structure
And then you’ll need to define your custom font in the CSS file using the @font-face rule by specifying the font name and providing the path to your font files.
How do I install a custom font on an HTML site
I have it downloaded locally — is there a simple CSS trick to accomplish this?
6 Answers 6
Yes, you can use the CSS feature named @font-face. It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.
You declare it in the CSS like this:
Then, you can just reference it like the other standard fonts:
So, in this case,
And you just need to put the JUNEBUG.TFF in the same location as the html file.
I downloaded the font from the dafont.com website:
You can use @font-face in most modern browsers.
Here’s some articles on how it works:
Here is a good syntax for adding the font to your app:
Here are a couple of places to convert fonts for use with @font-face:
Also cufon will work if you don’t want to use font-face, and it has good documentation on the web site:
For the best possible browser support, your CSS code should look like this :
If you are using an external style sheet, the code could look something like this:
And should be saved in a separate .css file (eg styles.css). If your .css file is in a location separate from the page code, the actual font file should have the same path as the .css file, NOT the .html or .php web page file. Then the web page needs something like:
in the <head> section of your html page. In this example, the font file should be located in the css folder along with the stylesheet. After this, simply add the inside any tag in your html to use Junebug font in that element.
If you’re putting the css in the actual web page, add the style tag in the head of the html like:
And the actual element style can either be included in the above <style> and called per element by class or id, or you can just declare the style inline with the element. By element I mean <div>, <p>, <h1> or any other element within the html that needs to use the Junebug font. With both of these options, the font file (Junebug.ttf) should be located in the same path as the html page. Of these two options, the best practice would look like:
And the least acceptable way would be:
The reason it’s not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical. This is also the main reason that I recommend using the very first option of using external style sheets. I hope this helps.
Как подключать шрифты
Если говорить в очень общем смысле, то способов подключить сами шрифты к странице — это локально и внешне через какой-то сервис вроде Google Fonts.
Подключать шрифты через сервис довольно просто, достаточно разобраться в интерфейсе Google Fonts. Поэтому, этот способ мы рассматривать не будем, а разберем вариант с подключением шрифтов локально.
Если же вы в поисках легкого пути, то вам тут делать особо нечего =)
(Но можно прочитать последнюю часть, там про указание шрифта)
Из чего состоят шрифты
Зайдем издалека и рассмотрим структуру шрифта. Нам понадобятся эти знания, чтобы понимать, как мы управляемся со шрифтом.
Я попрошу людей, знакомых с типографией, несколько расслабиться: мы рассмотрим все в контексте веба и не будем слишком сильно усложнять.
Прежде всего, шрифты делятся на несколько типов. Вот самые основные (иное едва ли встретится):
- шрифты с засечками (serif);
- шрифты без засечек (sans-serif);
- моноширинные (monospace).
Возьмем, например, семейство Open Sans. Это семейство без засечек, оно попадает в категорию sans-serif. Стоп! Мы только что говорили про шрифты, какое еще “семейство”?
Семейство — это набор шрифтов, объединенных общей стилистикой (это еще можно назвать “гарнитура”, но нам в вебе ближе термин “семейство”). Именно семейства имеют названия: Arial, Times New Roman, Helvetica . И Open Sans в том числе. Давайте откроем Open Sans на Google Fonts и посмотрим что там есть:
Итак, куча разных вариантов. По сути, каждый вариант — это и есть шрифт, входящий в семейство Open Sans.
Если его скачать, то каждый шрифт будет представлен отдельным файлом:
Можно легко заметить, что шрифты отличаются друг от друга по двум параметрам: толщине (или весу, weight) и начертанию (style).
Чуть ниже находится список глифов — букв и символов, которые есть в этом семействе (но нам это важно, только если мы захотим упороться на оптимизации):
Ну, со структурой шрифта разобрались, давайте подключать!
Разбираем @font-face по кусочкам
Итак, чтобы подключить шрифт, нам нужно в CSS использовать правило @font-face :
Это правило будет подключать шрифт (именно шрифт, и теперь мы знаем что это значит). Разберемся на примере нашего Open Sans.
Основные параметры шрифта
- font-family — указывает, к какому семейству относится шрифт;
- font-weight — указывает вес шрифта;
- font-style — указывает начертание шрифта.
Будьте внимательны с параметром font-family. Там должно быть указано именно семейство шрифта, то есть в нашем случае это ‘Open Sans’ . Многие по ошибке указывают ‘Open Sans Bold’ , ‘Open Sans Italic’ и создают тем самым семейства с одним шрифтом. И каждый раз, меняя толщину шрифта, приходится менять и семейство.
Так делать не нужно, @font-face как раз позволяет нам подключать к одному семейству разные шрифты с указанным весом и начертанием, чтобы браузер по этим параметрам брал нужный файл.
Получается что-то такое:
Подключаем файлы
Как мы помним, каждый шрифт представлен отдельным файлом. Поэтому, для каждого @font-face правила нужно подключить свой файл. Но с ними не все так просто (ну а как же).
У шрифтов очень много различных форматов. К счастью, для современных браузеров на данный момент используется всего 2: woff и woff2. woff2 чуть современнее и лучше оптимизирован.
Чтобы подключить файлы, нужно воспользоваться параметром src :
Важно соблюсти порядок подключения и начинать с более современного (менее поддерживаемого, но лучше оптимизированного) формата.
Почему так?
Браузер будет считывать список файлов по очереди и загрузит первый подходящий ему файл. Все браузеры, имеющие поддержку woff2, поддерживают и woff. Следовательно, если woff будет идти первым, то до более современного формата браузеры никогда не дойдут.
Оптимизация загрузки
Кажется, что шрифт — файл очень небольшой, всего несколько десятков килобайт. Что, блин, там оптимизировать?
Ну, давайте начнем с того, что шрифт по степени важности намного выше, чем даже контентные картинки, потому что 99% сайтов самую важную информацию предоставляют в текстовом виде. Поэтому, задержка в отображении текста крайне критична и с большой долей вероятности посетитель обратит на это внимание. А уж если вдруг что-то случится со стабильностью или скоростью интернета…
Возможно, вы замечали, что на некоторых сайтах при загрузке появляется совсем белая страница, а на других текст показывается сперва одним шрифтом, а затем другим.
Как раз за это отвечает параметр font-display . Про нюансы его работы можно писать отдельную статью (хотя, что значит можно, вот статья Зака Лезермана в переводе на CSS-live с кучей слов и жуткими аббревиатурами типа FOIT, FOUT и FOFT).
Я же просто укажу, что значение auto , действующее по умолчанию, обычно использует стратегию block , которая означает, что пока шрифт грузится, браузер не показывает ту самую белую страницу, что не очень здорово, так как соединение может быть плохим или вовсе оборваться, что оставит посетителя сайта без текста.
Лично я предпочитаю значение swap : так браузер сперва покажет текст запасным шрифтом, а как только загрузится нужный, то он заменит запасной на него. Да, это создаст небольшое дергание страницы, но зато текст будет доступен сразу:
Помимо этого, можно ускорить загрузку шрифта, добавив в <head> страницы предзагрузку для тех файлов шрифтов, что точно понадобятся. Тогда браузер начнет загружать шрифт еще до того, как распарсит стили и сам поймет, какие шрифты ему нужны:
Есть и еще один метод: указать в адресе шрифта имя для поиска среди локально установленных в системе пользователя шрифтов, что вообще избавит от необходимости загружать какие-либо файлы:
Однако, здесь стоит проявить осторожность, так как на компьютере пользователя может стоять какой-нибудь пиратский или устаревший шрифт, который не будет выглядеть так же, как ваш.
Ну и напоследок: можно разделить шрифт по глифам и загружать его только при необходимости использования символов из определенного диапазона.
В рамках курса этого не только не требуют, но и не рассказывают о таких возможностях. Если же очень интересно, то рекомендую посмотреть выступление Вадима Макеева _____ ___ _____?
Как указывать шрифт
Ну и последнее: как правильно шрифт указывать? Кажется, все очень просто: есть свойство font-family:
Но на самом деле этого недостаточно, нужно указать еще 2 параметра:
- веб-безопасный шрифт: это максимально похожий шрифт на нужный, который подключится если вдруг не загрузится нужный. Это должен быть один из шрифтов, имеющий значительную долю в одной из популярных операционных систем. Список можно посмотреть где-нибудь в интернете;
- семейство шрифта: это уже по сути тип шрифта, в основном это будет шрифт с засечками или без.
И получится что-то такое:
Небольшой оффтоп. И сразу предупреждаю: на курсе так не делаем =)
В общем, на мой взгляд веб-безопасный шрифт вещь довольно бесполезная. Ни один из этих старых допотопных шрифтов не будет похож на современный.
Более того, если выставить сразу sans-serif, то система применит свой шрифт. Для современных macOS это будет San Francisco, а для Windows это будет Segue UI. Так вот, любой этот шрифт будет больше похож на Open Sans, чем допотопный Arial или его братья.
Так что получается, что веб-безопасный шрифт только мешает.
И есть еще один важный момент, который касается наследования. Это относится не только к шрифтам, но тем не менее рассмотрим этот момент. В самом свойстве font-family все довольно просто: браузер пытается подключить первый шрифт, и если не получается, то пытается подключить следующий, пока не получится. Если совсем не получится, браузер в итоге подключит Times New Roman (поэтому и указываем в конце семейство). Однако, внимание обратить нужно вот на что. Многие, указав весь необходимый набор шрифтов для body, для вложенных элементов с другим шрифтом уже не прописывают веб-безопасный и семейство:
И это большая ошибка, потому что браузер, когда он не сможет подключить Gotham, не пойдет в родительский элемент смотреть какие шрифты там указаны в font-family . CSS так не работает. Свойство font-family будет считаться перезаписанным полностью, и для элемента .some-class уже не будет иметь никакого значения что там за шрифты на body . И браузер попробует подключить Gotham, а затем двинется дальше, не найдет вариантов и подключит Times New Roman.
Шрифты и работа с ними — Основы верстки контента
Страшным сном дизайнера и верстальщика является фраза заказчика «Поиграйся со шрифтами». Многие эту фразу слышали, но, а как же поиграть со шрифтами? CSS предоставляет много правил для стилизации шрифтов. С некоторыми из таких свойств вы уже знакомы — это свойство font-weight и font-size .
Помимо насыщенности, CSS позволяет управлять следующими настройками:
- Семейство шрифтов;
- Стиль шрифта;
- Стиль строчных символов;
- Размер шрифта;
- Межстрочный интервал.
Не пугайтесь такому количеству различных свойств, их необязательно использовать все сразу. Некоторые используются достаточно редко.
Семейство шрифтов
CSS позволяет указывать шрифты, которые будут использованы на сайте. Для этого используется свойство font-family . Оно принимает список шрифтов, которые могут быть загружены на сайте. Это может быть одно семейство шрифтов или сразу несколько. Если указано несколько шрифтов, то браузер будет считывать их слева направо до первого шрифта, который он сможет использовать. Остальные шрифты будут игнорироваться. Например:
Если у пользователя в системе есть шрифт Georgia, то будет применен он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:
- У пользователя в системе установлен шрифт Times New Roman — шрифт применится к странице.
- У пользователя в системе не установлен шрифт Times New Roman — браузер подставит шрифт из основных настроек браузера. Это необходимо для возможности отобразить контент на странице.
А какой шрифт именно выберет браузер? Тут все зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:
- Антиква или шрифты с засечками. Такие шрифты чаще всего используются в книгах и новостных сайтах. В CSS обозначается serif .
- Гротеск или шрифты без засечек. Основной тип шрифтов на сайтах. Прямо сейчас вы читаете именно такой шрифт. В CSS обозначается sans-serif .
- Моноширинный шрифт. У этого семейства все символы имеют одинаковую ширину. Вы можете увидеть такой шрифт в терминалах или редакторах кода. В CSS обозначается monospace .
При указании шрифтов также возможно указать и основное семейство шрифтов. Если ни один из указанных шрифтов не был найден, то браузер подберет системный шрифт из того семейства, которое было указано. Дополним пример семейством шрифтов по умолчанию. В примере указаны шрифты из семейства антиква, поэтому стоит добавить соответствующее значение.
Всегда указывайте семейство шрифтов по умолчанию. Это считается хорошей практикой, так как не все шрифты могут присутствовать в системе пользователя.
Установка новых шрифтов
Необязательно полагаться только на системные шрифты. В проекте могут использоваться совершенно разные шрифты, и верстальщик должен уметь их подключать. Сам по себе шрифт представляет собой файл. Форматов таких файлов может быть несколько, и важно знать, какими браузерами они поддерживаются.
- .woff/.woff2 — шрифт формата Web Open Font Format. Распространенный формат, который поддерживается большинством современных браузеров.
- .ttf — шрифт формата TrueType. Данный формат был придуман в 80-е года 20 века и сейчас используется для поддержки старых браузеров. Совместим с современными браузерами. Золотая середина форматов.
- .eot — шрифт формата Embedded OpenType. Это наиболее старый формат. Его использование необходимо только в случае поддержки старых браузеров, например, Internet Explorer 6.0. Ситуация редкая, поэтому его использование почти не встречается.
Для установки шрифта используется конструкция @font-face . Она позволяет подключить шрифт в различных расширениях, определить имя и путь к файлу. На примере шрифта Roboto воспользуемся такой конструкцией.
Пусть наш проект имеет директорию fonts/, внутри которой находятся файлы шрифтов.
Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face :
- font-family — Имя подключаемого шрифта. Именно по нему можно обратиться после подключения.
- src — Путь к файлу со шрифтом.
После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.
Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретет следующий вид:
Способ хоть и рабочий, но немного сложный. Вместо одного названия шрифта и управления его насыщенностью свойством font-weight приходится указывать три разных названия для каждого начертания в отдельности.
@font-face позволяет указывать насыщенность шрифта с помощью font-weight . Это позволит подключить все начертания с использованием всего одного имени. В остальном запись не будет отличаться от того, что было в прошлом примере.
Пара слов об особенностях использования свойства font-family внутри конструкции @font-face . Указывая имя шрифта, не нужно дополнительно указывать семейство шрифтов. Это делается при указании шрифта у элемента. То есть, вот такая запись является некорректной:
Особое внимание обратите на то, что в примере не использовались кавычки. Это не является ошибкой. Использовать их или нет — выбор разработчика, но если в названии шрифта есть пробельные или специальные символы, то используйте кавычки. Для названия из одного слова можно опустить кавычки. Важно помнить, что если вы подключили шрифт с кавычками, то с ними нужно и указывать шрифт в селекторах. Если кавычек не было, то и при указании шрифта они не нужны
Стиль шрифта
Помимо обычного начертания, CSS позволяет задать и другой вариант отображения шрифта — курсивный. Для этого используется свойство font-style , которое может принимать одно из трех значений:
- normal — стандартное значение. Соответствует нормальному отображению шрифта. Именно такой стиль вы читаете прямо сейчас.
- italic — курсивное начертание. Данное начертание имеет наклонные буквы, в отличие от нормального стиля. Вот так выглядит курсивный шрифт.
- oblique — тоже курсивное начертание. Зачастую оно не отличается от значения italic .
Но почему существует два похожих значения для курсива? На самом деле они не очень похожие. Курсив, который задается значением italic , является самостоятельным шрифтом, для которого есть отдельный файл в системе или на сервере. Он относится больше к рукописному тексту, тогда как oblique искусственно наклоняет символы текущего шрифта.
Строчные символы
С помощью CSS можно задать такой вид строчных символов как «Капитель».
Капитель — это начертание строчных букв, размер которых совпадает (или приближен) к размеру заглавных букв. Такой прием используется в дизайне в виде стилистического оформления. Посмотрите на этот параграф:
Текст с использованием капители
По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.
Капитель устанавливается с помощью свойства font-variant . У него возможны два значения:
- normal — стандартная стилистика строчных символов.
- small-caps — капитель.
Межстрочный интервал
Межстрочный интервал (интерлиньяж) — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создается расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.
Для указания межстрочного интервала используется свойство line-height . Оно может принимать значения с различными единицами измерения. Чаще всего используют число, указывающее, во сколько раз интервал больше размера шрифта.
Может показаться, что значения 1.5em и 1.5 будут работать одинаково. Это правда, но только для одного элемента. Сравним вот такие блоки:
При использовании значения 1.5 межстрочный интервал будет высчитан отдельно для блока news и для каждого элемента внутри, в зависимости от его размера шрифта:
- У блока news межстрочный интервал будет равен 16 * 1.5 = 24px
- Заголовок второго уровня получит интервал 18 * 1.5 = 27px
Заменим line-height: 1.5 на line-height: 1.5em :
При указании единицы измерения свойство line-height будет посчитано один раз и это значение применится ко всем элементам внутри:
- У блока news межстрочный интервал будет равен 16 * 1.5 = 24px
- Заголовок второго уровня тоже получит интервал в 24px , так как оно будет наследовано от блока news
Обобщенное правило
Теперь, для работы со шрифтами, вы знаете все основные правила. Это:
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
Их можно указывать не только по отдельности, но и все вместе с помощью одного CSS правила font . Шесть разных правил внутри одного! Это может быть удобно, если действительно нужны все значения. При этом вы не обязаны указывать все значения. Единственное ограничение — наличие значений для font-size и font-family . Остальные значения можно не указывать. Укажем значения для всех этих свойств внутри правила font :
Важно обратить внимание на запись 16px/24px . Внутри правила font так обозначаются свойства font-size и line-height .
Использование одного правила или нескольких
Этот раздел относится не только к правилу font , но и ко всем обобщенным правилам, которые вы изучите в процессе прохождения курсов. С одной стороны, использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:
- Запоминание правильного порядка значений. Используя обобщенные свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщенном свойстве. С опытом вы сможете переключиться на одно правило.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно