Как подключить шрифты в html google fonts

Get Started with the Google Fonts API

This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

A quick example

Here's an example. Copy and paste the following HTML into a file:

Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine:

That sentence is ordinary text, so you can change how it looks by using CSS. Try adding a shadow to the style in the previous example:

You should now see a drop shadow under the text:

And that's only the beginning of what you can do with the Fonts API and CSS.

Overview

You can start using the Google Fonts API in just two steps:

Add a stylesheet link to request the desired web font(s):

Style an element with the requested web font, either in a stylesheet:

or with an inline style on the element itself:

For a list of fonts you can use, see Google Fonts.

Specifying font families and styles in a stylesheet URL

To determine what URL to use in your stylesheet link, start with the Google Fonts API base URL:

Then, add the family= URL parameter, with one or more font family names and styles.

For example, to request the Inconsolata font:

To request multiple font families, separate the names with a pipe character ( | ).

For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:

Requesting multiple fonts allows you to use all of those fonts in your page. (But don't go overboard; most pages don't need very many fonts, and requesting a lot of fonts may make your pages slow to load.)

The Google Fonts API provides the regular version of the requested fonts by default. To request other styles or weights, append a colon ( : ) to the name of the font, followed by a list of styles or weights separated by commas ( , ).

To find out which styles and weights are available for a given font, see the font's listing in Google Fonts.

For each style you request, you can give either the full name or an abbreviation; for weights, you can alternatively specify a numerical weight:

Style	Specifiers
italic	italic or i
bold	bold or b or a numerical weight such as 700
bold italic	bolditalic or bi

For example, to request Cantarell italic and Droid Serif bold, you could use any of the following URLs:

Use font-display

font-display lets you control what happens while the font is unavailable. Specifying a value other than the default auto is usually appropriate.

Pass the desired value in the querystring display parameter:

Specifying script subsets

Some of the fonts in the Google Font Directory support multiple scripts (like Latin, Cyrillic, and Greek for example). In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.

For example, to request the Cyrillic subset of the Roboto Mono font, the URL would be:

To request the Greek subset of the Roboto Mono font, the URL would be:

To request both Greek and Cyrillic subsets of the Roboto Mono font, the URL would be:

The Latin subset is always included if available and need not be specified. Please note that if a client browser supports unicode-range (http://caniuse.com/#feat=font-unicode-range) the subset parameter is ignored; the browser will select from the subsets supported by the font to get what it needs to render the text.

For a complete list of available fonts and font subsets please see Google Fonts.

Optimizing your font requests

Oftentimes, when you want to use a web font on your website or application, you know in advance which letters you'll need. This often occurs when you're using a web font in a logo or heading.

In these cases, you should consider specifying a text= value in your font request URL. This allows Google to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.

To use this feature, simply add text= to your Google Fonts API requests. For example if you're only using Inconsolata for the title of your blog, you can put the title itself as the value of text= . Here is what the request would look like:

As with all query strings, you should URL-encode the value:

This feature also works for international fonts, allowing you to specify UTF-8 characters. For example, ¡Hola! is represented as:

Enabling font effects (Beta)

When making headers or display texts on your website, you'll often want to stylize your text in a decorative way. To simplify your work, Google has provided a collection of font effects that you can use with minimal effort to produce beautiful display text. For example:

To use this beta feature, simply add effect= to your Google Fonts API request and add the corresponding class name to the HTML element(s) that you want to affect. In our example above, we used the shadow-multiple font effect, so the request would look like:

To use the effect, add the corresponding class name to your HTML element(s). The corresponding class name is always the effect name prefixed with font-effect- , so the class name for shadow-multiple would be font-effect-shadow-multiple :

You can request multiple effects by separating the effect names with a pipe character ( | ).

Here is a complete listing of all the font effects that we offer:

Effect	API Name	Class Name	Support
Anaglyph	anaglyph	font-effect-anaglyph	Chrome, Firefox, Opera, Safari
Brick Sign	brick-sign	font-effect-brick-sign	Chrome, Safari
Canvas Print	canvas-print	font-effect-canvas-print	Chrome, Safari
Crackle	crackle	font-effect-crackle	Chrome, Safari
Decaying	decaying	font-effect-decaying	Chrome, Safari
Destruction	destruction	font-effect-destruction	Chrome, Safari
Distressed	distressed	font-effect-distressed	Chrome, Safari
Distressed Wood	distressed-wood	font-effect-distressed-wood	Chrome, Safari
Emboss	emboss	font-effect-emboss	Chrome, Firefox, Opera, Safari
Fire	fire	font-effect-fire	Chrome, Firefox, Opera, Safari
Fire Animation	fire-animation	font-effect-fire-animation	Chrome, Firefox, Opera, Safari
Fragile	fragile	font-effect-fragile	Chrome, Safari
Grass	grass	font-effect-grass	Chrome, Safari
Ice	ice	font-effect-ice	Chrome, Safari
Mitosis	mitosis	font-effect-mitosis	Chrome, Safari
Neon	neon	font-effect-neon	Chrome, Firefox, Opera, Safari
Outline	outline	font-effect-outline	Chrome, Firefox, Opera, Safari
Putting Green	putting-green	font-effect-putting-green	Chrome, Safari
Scuffed Steel	scuffed-steel	font-effect-scuffed-steel	Chrome, Safari
Shadow Multiple	shadow-multiple	font-effect-shadow-multiple	Chrome, Firefox, Opera, Safari
Splintered	splintered	font-effect-splintered	Chrome, Safari
Static	static	font-effect-static	Chrome, Safari
Stonewash	stonewash	font-effect-stonewash	Chrome, Safari
Three Dimensional	3d	font-effect-3d	Chrome, Firefox, Opera, Safari
Three Dimensional Float	3d-float	font-effect-3d-float	Chrome, Firefox, Opera, Safari
Vintage	vintage	font-effect-vintage	Chrome, Safari
Wallpaper	wallpaper	font-effect-wallpaper	Chrome, Safari

Note: Some of the font effects (e.g. 3d) do not scale particularly well, and tend to look best when used with larger font sizes. Additionally, you might want to style the fonts further, such as changing the color of the text to match your page.

There are many more ways to style your fonts, and many things are possible through CSS. We are simply providing a few ideas to get you started. For more ideas, try Google searching "css text effects" and browse through many of the ideas that are already on the web!

Нестандартные шрифты: как подключить и оптимизировать

Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.

Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.

Выбираем формат шрифта

Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.

Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 вообще можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF .

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в <head> ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

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

Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.

Подключение шрифтов с помощью правила @font-face

Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2, о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.

После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face . В самом базовом варианте оно будет включать:

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

Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.

Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .

Базовый вариант правила:

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

Оптимизация

Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.

FOIT, FOUT и FOFT

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

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .

Свойство font-display

У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:

auto — поведение по умолчанию, зависит от браузера.

block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.

swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.

fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.

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

Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .

Предзагрузка шрифтов

Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.

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

Для того, чтобы предзагрузка сработала, нужно поместить в <head> ссылку на шрифт и задать атрибуту rel значение preload :

Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.

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

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в <head> при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

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

Полезности

HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.

Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.

Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.

Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.

Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

How to use Google Fonts in your next web design project

So you’ve probably heard that Google has hundreds of free web fonts ready to be used for your next project. But how do you use them on your website? This article will walk you through the steps to take in order to get them running on your website. It should take less than 10 minutes!

What are Google Fonts?

“Google Fonts first launched in 2010 as an engineering initiative to move the web forward and make it faster.” — Google Design

Google Fonts launched in 2010, quickly becoming the Internet’s largest, free, open-source selection of fonts. All Google Fonts are free for commercial and personal use. The Google Fonts website makes it easy for anyone to quickly select and utilize different fonts for their own design needs.

Who uses Google Fonts?

Everyone does! Graphic designers, UX designers, researchers, developers, web designers, bloggers, social media managers, entrepreneurs, artists, students, teachers, photographers, and many more. I’ve seen Google Fonts used on billboards, posters, presentation decks, wedding invitations, websites, and books.

Who creates the fonts?

Google Fonts collaborates with type designers, type foundries, and the design community all over the world. These people and organizations design the fonts that you see on Google Fonts. For example, Łukasz Dziedzic is an independent typeface designer who designed the popular typeface, Lato. A typeface foundry named ParaType designed the typeface PT Serif.

Why does Google care about fonts?

Every Google Fonts API link on a website gives Google the opportunity to do more data mining. Does that sound gross? Yes, but I don’t think it should stop you from using Google Fonts.

Another more comforting reason Google cares about fonts is because they want to make open-source web fonts accessible to the masses. They want to make a faster, more beautiful web that is easier to navigate and use. They also started Google Fonts back in 2010 when a service like this was much needed, so they solved yet another problem we were having on the Internet. #dontbeevil

Google Fonts. Документация и примеры использования

Все умеют подключать и использовать Google Fonts, это так просто и так популярно, но никто и никогда не читал документацию по использованию шрифтов от Google, а оказывается там есть некоторые интересные возможности.

Простой пример подключения Google Fonts:

Подключить шрифты к своему сайту можно двумя способами:

1. Подключаем шрифт как внешний файл в HTML через тег link :

2. Импортируем шрифт в свой CSS-файл или как инлайн-стили:

Используем шрифт просто в своих CSS правилах:

Для Гугловских шрифтов доступны все те же правила и свойства, что и для обычных шрифтов (вдруг, кто не знал)

А теперь интересное.

1. Несколько шрифтов в одном запросе

Не нужно подключать каждый шрифт отдельным запросом, в одном запросе можно подключить сразу несколько шрифтов разделяя их вертикальной чертой |

Для каждого шрифта доступны свои параметры и стили, они перечисляются через двоеточие : и запятую , — не обязательно перечислять все варианты жирности шрифта, подключайте только то, что используется у вас на сайте:

Можно использовать сокращения:
italic — italic или i
bold — bold или b , или числовое значение 700
bold italic — bolditalic или bi

2. Поддержка кириллицы

Не все шрифты поддерживают кириллицу, проверить это можно только на сайте при выборе шрифтов. Если не поддерживается кириллица, то вы не увидите гугловский шрифт на своем сайте, если же шрифт поддерживает кириллицу, то нужно подключать его с поддержкой subset=cyrillic

При этом латиницу не нужно подключать, она поддерживается по умолчанию.

3. Оптимизация запроса шрифта

Если вы хотите использовать какой-то диковинный заморский шрифт всего лишь для логотипа или какой-то короткой фразы, то вовсе не обязательно подключать весь шрифт со всем алфавитом. Можно подключить только нужные буквы с помощью параметра text= при подключении шрифта. И это очень круто.

так же поддерживаются пробелы и прочие символы в формате URL-encode

а еще поддерживаются UTF-8 символы, например, текст ¡Hola! можно вывести таким образом:

При подключении отдельных букв не нужно указывать язык с помощью параметра subset= , подключатся только те буквы, что будут указаны при подключении шрифта в параметре text=

4. CSS Эффекты для шрифтов

В Google Fonts есть встроенная поддержка CSS Эффектов для шрифтов, что может пригодиться для красивого выделения заголовков или других семантических частей текста. Для этого используется параметр effect=

Подключаем шрифт с эффектом shadow-multiple :

Чтобы использовать эффект, добавьте соответствующее имя класса к вашему HTML-элементу. Соответствующее имя класса всегда является именем эффекта с префиксом font-effect- , поэтому имя класса для эффекта shadow-multiple будет font-effect-shadow-multiple :

Можно использовать несколько эффектов, перечислив их названия через вертикальную черту | :

Список всех эффектов для нескольких шрифтов:

Список всех эффектов на живом примере — Это переделанный пример с сайта Google Fonts — изменены урлы картинок, потому что у Google проблема с CORS policy: No ‘Access-Control-Allow-Origin’. И поэтому картинки с домена https://themes.googleusercontent.com/ не могут использоваться на других сайтах.

Список всех эффектов на живом примере на сайте https://developers.google.com/fonts/docs/getting_started — некоторые эффекты, в которых используются -webkit-mask-image могут не отображаться на данный момент

Вариант 1 — отрицательный отступ для родительского блока Самый простой способ установить минимальное расстояние между…

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…

Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…

Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…