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.
Как подключить шрифт к сайту с помощью CSS и не только
Шрифты — одна из базовых вещей, которые используются при разработке сайта. Наряду с картинками, файлами css, js — шрифты незаменимый элемент современного сайта. Поэтому часто у верстальщиков (и не только) возникает вопрос — как подключить шрифт к сайту? И как это можно сделать с помощью css. Давайте разберемся с различными вариантами подключения шрифта к html странице.
Не все сайты работают одинаково. Поэтому некоторые методы не будут актуальны для решения вашей задачи. Это статья больше ориентирована на людей, которые сталкивались с HTML и CSS, а также имеют возможность редактировать файлы на своем сайте.
Подключение с помощью CSS через @font-face
В CSS есть такое правило font-face, которое позволяет подключить нужный шрифт к сайту.
Пример подключения шрифта через font-face:
Давайте разберем синтаксис. Что мы только что сделали. Построчно.
font-family — задали название нашего шрифта. Затем, когда мы захотим, например, задать всем h1 этот шрифт, достаточно в CSS прописать следующее:
Далее src. С помощью этого свойства мы указываем путь к нашему шрифту. В нашем конкретном случае файл MyFont.ttf находится в папке fonts, которая на один уровень выше от нашего css файла, в котором и выполняется данный код. Можно также указать url-адрес, по которому доступен шрифт.
Помимо src есть еще свойство local. Мы можем сказать браузеру, чтобы он искал на локальном компьютере пользователя определенный шрифт. Это может сократить время загрузки страницы, если у пользователя будет на компьютере установлен текущий шрифт.
Кстати, мы можем задать сразу несколько форматов одного и того же шрифта (для лучшей поддержки в различных браузерах):
Браузер сам выберет нужный ему шрифт. Список доступных форматов: «woff», «woff2», «truetype», «opentype», «embedded-opentype», и «svg».
Если вы хотите подключить несколько разных шрифтов, то можете несколько раз использовать @font-face.
Как подключить шрифт с Google Fonts
Довольно часто нужный шрифт находится в популярной библиотеке Google Fonts.
Подключить шрифт с Google Fonts на сайт можно разными методами.
Например, вы можете сказать понравившийся шрифт и затем добавить его с помощью @font-face, о которой я рассказал вам выше.
Можно скачать шрифт с Google Fonts
Также есть еще варианты.
Находите нужный вам шрифт.
Выбираете нужное начертание (font-weight):
Выбираете нужное начертание
Затем, в правом верхнем углу нажимайте на иконку «View selected families»:
Нажимайте на иконку «Посмотреть выбранные шрифты»
У вас появится окно, где вы можете выбрать способ, как добавить шрифт на сайт: через link или @import. Link (выбрано по умолчанию) — вам достаточно копировать код и вставить внутри тега <head></head> (1 на изображении ниже). Далее, вы можете задавать элементам нужный шрифт с помощью CSS (2 на изображении ниже).
1 — вставляем в head, 2 — вставляем в CSS
Вариант с @import ничем не отличается, однако, если вы уберете <style></style> в коде, который предлагается скопировать, то можете вставлять @import прямо в главный css файл. Вариант с @import позволяет быть более гибким, однако, требует больше внимания.
Если вы прочитали статью, а шрифт все еще не подключается, то пишите в комментариях — мы рассмотрим ваш код вместе.
Как подключать шрифты
Если говорить в очень общем смысле, то способов подключить сами шрифты к странице — это локально и внешне через какой-то сервис вроде 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.
Как подключить скаченный шрифт к сайту html
Adding .ttf fonts using CSS: In the late 1980s, after getting beaten by adobe’s type 1 fonts, Apple came up with a new font format type which is .ttf(True Type Font). These fonts were so awesome that, they become the most common font formats all over the world in a very short time. In fact, windows itself started using them in there operating system.
Then, if you wish to use these font formats in your web pages, here is a detailed step by step explanation, how to import and use .ttf(true type fonts) in Html using CSS.
1. Download .ttf format file: The .ttf format is quite famous nowadays, these font files are available for free on Google. You can visit font space, font squirrel, etc websites that provide these fonts for free. Keep all the files in the same folder.
2. Create a HTML file: Create a HTML file and add a h2 tag for demonstrating our font style.