Как подключить шрифт montserrat css

Шрифт Montserrat

Старые плакаты и знаки в традиционном Монтсерратском районе Буэнос-Айресзарес Джульетты Улановский, чтобы создать этот шрифт и спасти красоту городской типографии, возникшую в первой половине двадцатого века. По мере изменения городского развития, он никогда не вернется к своей первоначальной форме и навсегда потеряет проекты, которые являются настолько уникальными и уникальными. Письма в этом проекте имеют работу, самоотверженность, заботу, цвет, контраст, свет и жизнь, днем и ночью! Смотрите так красиво. Проект Montserrat начался с идеи спасти то, что находится в Монтсеррате, и установить его бесплатно по лицензии libre, SIL Open Font License.

• 04.10.2017
• 257 764
• 5
• В избранное

Adding Google Fonts to Your Next.js App

Typography can make your application come to life. Adding Google fonts (or custom fonts) to your Next.js project takes a few simple steps.

I wrote a short explanation of Web Fonts here that provides additional helpful details.

The information here will allow you to use Google Fonts in the way that makes the most sense for your project.

The Options

I’ll cover 3 ways to include Google Fonts to a Next.js project. Feel free to pick the approach that makes sense for you.

Option 1: Reference Google fonts from CDN

This is usually my preferred method because it’s quick to get going and avoids using another external package for something relatively simple.

Option 2: Utilize an NPM Package

This is a good option if you don’t mind adding an npm package to take care of this for you. The NPM package I’ll cover also does some optimizations that will help with your lighthouse score.

Option 3: Download and reference fonts locally

This is a good option if you prefer not to depend on Google.com (user privacy). This might also make sense if you pair your Google font with a custom font from a different 3rd party provider (consistency).

Option 1: Reference Google Fonts from CDN

This is frequently my initial approach to adding Google Fonts (though I may change later as the project matures).

I like this approach because it’s fairly easy to setup and doesn’t require depending on another NPM package. Version upgrades happen often (especially in Next.js), and keeping your project references updated (and testing after each upgrade) can become a burden.

Step 1: Create Emtpy Project

 > yarn create next-app 

Step 2: Add a Custom Document File

Next.js has two special documents/component types that we’ll use to add Google Fonts. They are _document.js and _app.js. I include these two files in all my projects for other purposes, so this is natural step.

First let’s create the pages/_document file with the code

 import Document,  Html, Head, Main, NextScript > from 'next/document' class MyDocument extends Document  static async getInitialProps(ctx)  const initialProps = await Document.getInitialProps(ctx) return  . initialProps > > render()  return ( Html> Head> link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet" /> Head> body> Main /> NextScript /> body> Html> ) > > export default MyDocument 

This is boilerplate code pulled from the custom document documentation page. We added the link tag that references a Google font (Lobster in this case).

Here we’ll use the Google Hosted with Link tag method.

Next.js has an advanced feature called a Custom Document that allows you to augment your overall HTML document. In this case, we are looking to add a link tag to download the hosted google font in the document head.

Create a new file at pages/_document.js and add the contents

Create an empty Next.js project

Let’s create a standard Next.js project and accept the default starter app.

 > yarn create next-app 

Use a Link Tag (Option 1 — my current preference)

Here we’ll use the Google Hosted with Link tag method.

Next.js has an advanced feature called a Custom Document that allows you to augment your overall HTML document. In this case, we are looking to add a link tag to download the hosted google font in the document head.

Create a new file at pages/_document.js and add the contents

 import Document,  Html, Head, Main, NextScript > from 'next/document' class MyDocument extends Document  static async getInitialProps(ctx)  const initialProps = await Document.getInitialProps(ctx) return  . initialProps > > render()  return ( Html> Head> link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet" /> Head> body> Main /> NextScript /> body> Html> ) > > export default MyDocument 

You’ll notice the Lobster font type referenced in the Link tag . I used Lobster because it’s different from the default Next.js font and fallbacks: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

Use the font you prefer by visiting Google Fonts and grabbing the corresponding tag.

Now, update the default css font-family rule in pages/index.js . You’ll find this at the bottom of the index page. Replace the tag with:

 style jsx global> html, body  padding: 0; margin: 0; font-family: Lobster; > *  box-sizing: border-box; > `>style> 

Run your project with yarn dev . You should see the before and after screenshot of the font change. You’ll notice the font on the right is now Lobster.

If you’re on a Windows PC or Android, you may see a different default font (left side) here (I’m on macOS)

Use an @import CSS Rule (Option 2)

Your second option is to use a CSS @import rule to reference the Gooogle hosted font. You’ll want to do this before any of your CSS classes reference the font. You can add this to the tag that comes with the default Next.js project, but I prefer the flexibility of adding my own CSS class.

To add a CSS class, you need to add a custom _app component (learn more about custom apps). Add a new page called _app.js in the root of your project ( pages/_app.js ) with the content

 import '../css/main.css' function MyApp( Component, pageProps >)  return Component . pageProps> /> > export default MyApp 

Next, you’ll create a new directory called css in the root of your project, and a file named main.css in that directory ( css/main.css )

 @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); /* can now reference my font */ body  font-family: Lobster; > /* my custom css */ 

Host your fonts locally

You’ll need to define your own @font-face CSS rule if you purchased fonts or prefer to host them locally. The @font-face CSS rule contains the attributes that define your font.

You can read more about Web Fonts or the @font-face CSS rule.

In Next.js, you can add your fonts to the public directory. I recommend creating a public/fonts . You would then reference your fonts location in your @font-face like this.

In Next.js, you can add your fonts to the public directory. I recommend creating a public/fonts directory to store them. The @font-face CSS rule can then reference your font location like this.

 /* this is an abbreviated version of @font-face, meant to show how to reference the font in the relative url attribute. /* assuming the fonts were stored in public/fonts */ @font-face  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), url(/fonts/roboto.woff2) format('woff2'); > 

Common Questions / Answers

Why not use the next-google-fonts package to add fonts?

The next-google-fonts NPM package is great solution. My goal was to unpack how Google fonts and Next.js work together in case you prefer not to use an NPM package. Furthermore, if you have a custom font or prefer to host the Google font locally, the NPM package won’t work in that scenario.

An advantage of using the NPM package is the optimization techniques included for faster loading and better lighthouse scores.

How performant is this approach? How do I increase my lighthouse score?

I have not shown many of the optiimization techniques to help with faster font loading. I can evolve this article if the demand is there. Ultimately YMMV with each approach. There are lots of conflicting reports and tests on which techniques are best practices and have the most positive impact.

I would encourage you to test with your specific site/app and use the dev tools combined with «disable cache» and the built-in ability to change connection speeds.

font-weight

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

Интерактивный пример

Синтаксис

font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset; 

Значения

Нормальное начертание. То же, что и 400 .

Полужирное начертание. То же, что и 700 .

Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).

Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

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

Недоступность заданного значения

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

• Если задано значение выше 500 , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
• Если задано значение менее 400 , будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
• Если задано значение 400 , будет применено 500 . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400 .
• Если задано значение 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400 .

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

наследуемое значение	жирнее	светлее
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

Значение	Общее название
100	Тонкий (Волосяной) Thin (Hairline)
200	Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300	Светлый Light
400	Нормальный Normal
500	Средний Medium
600	Полужирный Semi Bold (Demi Bold)
700	Жирный Bold
800	Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900	Чёрный (Густой) Black (Heavy)

Интерполяция

Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

Формальный синтаксис

font-weight =
| (en-US)
bolder | (en-US)
lighter

=
normal | (en-US)
bold | (en-US)

Примеры

HTML

p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?' p> div> I'm heavybr /> span>I'm lighterspan> div> 

CSS

/* Назначение тексту элемента 
жирного начертания. */ p  font-weight: bold; > /* Назначение тексту элемента жирности, которая больше на два уровня, чем normal, но все ещё меньше, чем стандартный bold. */ div  font-weight: 600; > /* Назначение тексту элемента жирности, которая на один уровень меньше, чем у его родителя. */ span  font-weight: lighter; > 

Result

Спецификации

Specification
CSS Fonts Module Level 4 # font-weight-prop

Начальное значение	normal
Применяется к	all elements and text. Это также применяется к ::first-letter и ::first-line .
Наследуется	да
Обработка значения	ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение
Animation type	жирность шрифта

Совместимость браузеров

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Введение в переменные шрифты в Интернете

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

Дэйв Кроссленд
Мустафа Куртулду
Роэль Нискенс
Томас Штайнер

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

Совместимость с браузером

По состоянию на май 2020 года переменные шрифты поддерживаются большинством браузеров. См. Могу ли я использовать переменные шрифты? и резервные варианты .

Введение

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

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

До появления переменных шрифтов каждый стиль реализовывался как отдельный файл шрифта. Благодаря переменным шрифтам все стили могут содержаться в одном файле.

Проблемы дизайнера и разработчика

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

У веб-дизайнеров и разработчиков другие ограничения, чем у полиграфистов, и важным из них является связанная с этим стоимость полосы пропускания наших проектов. Это стало камнем преткновения для более богатого типографского опыта, поскольку за него приходится платить. При использовании традиционных веб-шрифтов каждый стиль, используемый в наших проектах, требует от пользователей загрузки отдельного файла шрифта, что увеличивает задержку и время рендеринга страницы. Только включение стилей «Обычный» и «Жирный», а также их курсивных аналогов может составлять 500 КБ или более данных шрифта. Это еще до того, как мы разобрались с тем, как отображаются шрифты, с резервными шаблонами, которые нам нужно использовать, или с нежелательными побочными эффектами, такими как FOIT и FOUT .

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

Анатомия переменного шрифта

Вариативные шрифты решают эти проблемы, упаковывая стили в один файл.

Это работает, начиная с центрального стиля или стиля «по умолчанию», обычно «Обычного» — вертикального латинского дизайна с наиболее типичной толщиной и шириной, который наиболее подходит для простого текста. Затем он соединяется с другими стилями в непрерывном диапазоне, называемом «осью». Наиболее распространенной осью является Weight , которая может соединять стиль по умолчанию с полужирным стилем. Любой отдельный стиль может быть расположен вдоль оси и называется «экземпляром» переменного шрифта. Некоторые экземпляры названы разработчиком шрифта, например, положение 600 по оси веса называется SemiBold.

Переменный шрифт Roboto Flex имеет три стиля для оси веса . Обычный стиль находится в центре, а на противоположных концах оси есть два стиля: один более легкий, другой более тяжелый. Между ними вы можете выбирать из 900 экземпляров:

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

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

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

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

Определения осей

Существует пять зарегистрированных осей , которые управляют известными, предсказуемыми характеристиками шрифта: толщиной, шириной, оптическим размером, наклоном и курсивом. Помимо этого, шрифт может содержать пользовательские оси. Они могут контролировать любой аспект дизайна шрифта, который пожелает дизайнер шрифта: размер засечек, длину штрихов, высоту надстрочных элементов или размер точки на i.

Несмотря на то, что оси могут управлять одной и той же функцией, они могут использовать разные значения. Например, в переменных шрифтах Oswald и Hepta Slab доступна только одна ось — Weight, но диапазоны разные — Oswald имеет тот же диапазон, что и до его обновления до переменных, от 200 до 700, но Hepta Slab имеет экстремальный диапазон. вес волоска при 1, вплоть до 900.

Пять зарегистрированных осей имеют 4-значные строчные теги, которые используются для установки их значений в CSS:

Имена осей и значения CSS
Масса	wght
Ширина	wdth
Наклон	slnt
Оптический размер	opsz
Курсив	ital

Поскольку разработчик шрифта определяет, какие оси доступны в переменном шрифте и какие значения они могут иметь, важно выяснить, что предлагает каждый шрифт. Это должно быть указано в документации шрифта, или вы можете проверить шрифт с помощью такого инструмента, как Wakamai Fondue .

Варианты использования и преимущества

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

Захватывающее выражение

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

Посмотреть рабочий пример и исходный код приведенного выше образца можно здесь .

Анимация

Для этой оси было введено новое свойство CSS: font-optical-sizing . По умолчанию для него установлено значение auto , что заставляет браузер устанавливать значение оси на основе font-size . Это означает, что браузер автоматически выберет лучший оптический размер, но если вы хотите отключить это, вы можете установить для font-optical-sizing значение none .

Вы также можете установить собственное значение для оси opsz , если вам намеренно нужен оптический размер, не соответствующий размеру шрифта. Следующий CSS приведет к отображению текста большого размера, но с оптическим размером, как если бы он был напечатан с 8pt :

.small-yet-large

Использование пользовательских осей

В отличие от зарегистрированных осей, пользовательские оси не будут сопоставлены с существующим свойством CSS, поэтому вам всегда придется устанавливать их через font-variation-settings . Теги пользовательских осей всегда пишутся заглавными буквами, чтобы отличать их от зарегистрированных осей.

Roboto Flex предлагает несколько пользовательских осей, наиболее важной из которых является Grade ( GRAD ). Ось оценок интересна тем, что она меняет вес шрифта без изменения ширины, поэтому разрывы строк не изменяются. Играя с осью уклона, вы можете избежать необходимости возиться с изменениями оси веса, которые влияют на общую ширину, а затем с изменениями оси ширины, которые влияют на общий вес.

Ось уклона Roboto Flex изменяется с минимума на максимум.

Поскольку GRAD — это настраиваемая ось с диапазоном от -200 до 150 в Roboto Flex. Нам нужно решить эту проблему с помощью font-variation-settings :

.grade-light < font-variation-settings: `GRAD` -200; >.grade-normal < font-variation-settings: `GRAD` 0; >.grade-heavy

Вариативные шрифты в Google Fonts

Google Fonts расширила свой каталог за счет переменных шрифтов и регулярно добавляет новые. В настоящее время интерфейс предназначен для выбора отдельных экземпляров шрифта: вы выбираете нужный вариант, нажимаете «Выбрать этот стиль», и он будет добавлен в элемент , который извлекает CSS и шрифты из Google Fonts.

Чтобы использовать все доступные оси или диапазоны значений, вам придется вручную составить URL-адрес API Google Fonts. В обзоре переменных шрифтов перечислены все оси и значения.

Инструмент Google Variable Fonts Links также может предоставить вам последние URL-адреса полных переменных шрифтов.

Наследование настроек варианта шрифта

Хотя все зарегистрированные оси вскоре будут поддерживаться через существующие свойства CSS, на данный момент вам, возможно, придется полагаться на font-variation-settings в качестве запасного варианта. А если у вашего шрифта есть пользовательские оси, вам также понадобятся font-variation-settings .

Однако вот небольшая проблема с font-variation-settings . Каждое свойство, которое вы не установили явно, будет автоматически сброшено до значения по умолчанию. Ранее установленные значения не наследуются! Это означает, что следующее не будет работать должным образом:

 I should be slanted and have a light grade 

Сначала браузер применит font-variation-settings: ‘slnt’ 10 из класса .slanted . Затем он применит font-variation-settings: ‘GRAD’ -200 из класса .grade-light . Но это вернет slnt к значению по умолчанию, равному 0! Результатом будет текст с легким шрифтом, но без наклона.

К счастью, мы можем обойти это, используя переменные CSS:

/* Set the default values */ :root < --slnt: 0; --GRAD: 0; >/* Change value for these elements and their children */ .slanted < --slnt: 10; >.grade-light < --grad: -200; >.grade-normal < --grad: 0; >.grade-heavy < --grad: 150; >/* Apply whatever value is kept in the CSS variables */ .slanted, .grade-light, .grade-normal, .grade-heavy

Переменные CSS будут каскадными, поэтому, если элемент (или один из его родителей) установит slnt равным 10 , он сохранит это значение, даже если вы установите GRAD на что-то другое. Подробное объяснение этого метода см. в разделе «Исправление наследования переменных шрифтов» .

Обратите внимание, что анимация переменных CSS не работает (по замыслу), поэтому что-то вроде этого не работает:

@keyframes width-animation < from < --wdth: 25; >to < --wdth: 151; >> 

Эти анимации должны происходить непосредственно в font-variation-settings .

Повышение производительности

Вариативные шрифты OpenType позволяют нам хранить несколько вариантов семейства шрифтов в одном файле шрифта. Monotype провела эксперимент, объединив 12 входных шрифтов для создания восьми насыщенностей трех значений ширины, как для курсива, так и для римского стиля. Хранение 48 отдельных шрифтов в одном файле переменных шрифтов означало уменьшение размера файла на 88% .

Однако, если вы используете один шрифт, такой как Roboto Regular, и ничего больше, вы можете не увидеть чистого увеличения размера шрифта, если переключитесь на переменный шрифт со многими осями. Как всегда, это зависит от вашего варианта использования.

С другой стороны, анимация шрифта между настройками может вызвать проблемы с производительностью. Хотя ситуация улучшится, когда поддержка переменных шрифтов в браузерах станет более зрелой, проблему можно несколько уменьшить, если анимировать только те шрифты, которые в данный момент отображаются на экране. Этот удобный фрагмент от Dinamo приостанавливает анимацию в элементах с классом vf-animation , когда их нет на экране:

var observer = new IntersectionObserver(function(entries, observer) < entries.forEach(function(entry) < // Pause/Play the animation if (entry.isIntersecting) entry.target.style.animationPlayState = "running" else entry.target.style.animationPlayState = "paused" >); >); var variableTexts = document.querySelectorAll(".vf-animation"); variableTexts.forEach(function(el) < observer.observe(el); >); 

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

Если вы используете шрифты Google, рекомендуется предварительно подключиться к https://fonts.gstatic.com — домену, на котором размещены шрифты Google. Это позволит браузеру заранее узнать, где взять шрифты, когда они встречаются в CSS:

Этот совет работает и для других CDN: чем раньше вы позволите браузеру настроить сетевое соединение, тем скорее он сможет загрузить ваши шрифты.

Дополнительные советы по повышению производительности при загрузке шрифтов Google см. в разделе «Самые быстрые шрифты Google» .

Резервные варианты и поддержка браузеров

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

/* Set up Roboto for old browsers, only regular + bold */ @supports not (font-variation-settings: normal) < @font-face < font-family: Roboto; src: url('Roboto-Regular.woff2'); font-weight: normal; >@font-face < font-family: Roboto; src: url('Roboto-Bold.woff2'); font-weight: bold; >body < font-family: Roboto; >.super-bold < font-weight: bold; >> /* Set up Roboto for modern browsers, all weights */ @supports (font-variation-settings: normal) < @font-face < font-family: 'Roboto'; src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'), url('RobotoFlex-VF.woff2') format('woff2-variations'); font-weight: 100 1000; font-stretch: 25% 151%; >.super-bold < font-weight: 1000; >> 

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

Правило @supports не поддерживается Internet Explorer, поэтому в этом браузере не отображаются никакие стили. Если это проблема, вы всегда можете использовать один из олдскульных приемов , чтобы настроить таргетинг на соответствующие старые браузеры.

Если вы используете API Google Fonts, он позаботится о загрузке шрифтов, подходящих для браузеров ваших посетителей. Предположим, вы запрашиваете шрифт Oswald в диапазоне насыщенности от 200 до 700, например:

Современные браузеры, которые могут обрабатывать переменные шрифты, получат переменный шрифт и будут иметь каждый вес от 200 до 700. Старые браузеры будут получать отдельные статические шрифты для каждого веса. В данном случае это означает, что они загрузят 6 файлов шрифтов: один с весом 200, один с весом 300 и так далее.

Спасибо

Эта статья стала возможной только благодаря помощи следующих людей:

• Мустафа Куртулду , UX-дизайнер и защитник дизайна в Google
• Роэл Нискенс , UX-дизайнер/разработчик и эксперт по типографии в Kabisa
• Дэйв Кроссленд , руководитель программы, Google Fonts
• Дэвид Берлоу , шрифтовой дизайнер и типограф в Font Bureau
• Лоуренс Пенни , разработчик axis-praxis.org
• Мэнди Майкл , разработчик Variablefonts.dev

Изображение героя, созданное Бруно Мартинсом на Unsplash .

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2018-02-19 UTC.