Как подключить скачанный шрифт в css

Семейство шрифтов

Вы можете управлять шрифтом текста с помощью утилит семейства шрифтов.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

p class="font-sans . ">Быстрая коричневая лиса . p> p class="font-serif . ">Быстрая коричневая лиса . p> p class="font-mono . ">Быстрая коричневая лиса . p>

Применяя условно

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : font-serif , чтобы применять утилиту font-serif только при hover .

p class="font-sans hover:font-serif"> p> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

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

p class="font-sans md:font-serif"> p> 

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

Настройка вашей темы

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

tailwind.config.js

module.exports =   theme:   fontFamily:   'sans': ['ui-sans-serif', 'system-ui', . ],  'serif': ['ui-serif', 'Georgia', . ],  'mono': ['ui-monospace', 'SFMono-Regular', . ],  'display': ['Oswald', . ],  'body': ['"Open Sans"', . ],  >  >  > 

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

 // Array format: 'sans': ['Helvetica', 'Arial', 'sans-serif'], // Comma-delimited format: 'sans': 'Helvetica, Arial, sans-serif', >

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

 // Не сработает: 'sans': ['Exo 2', . ], // Добавьте кавычки: 'sans': ['"Exo 2"', . ], // . или экранируйте из пробела: 'sans': ['Exo\\ 2', . ], >

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

Предоставление настроек шрифта по умолчанию

При желании вы можете указать настройки-функции-шрифта по умолчанию и настройки-вариации-шрифта для каждого шрифта в вашем проекте, используя кортеж формы [fontFamilies, < fontFeatureSettings, fontVariationSettings >] при настройке пользовательского шрифты.

tailwind.config.js

module.exports =   theme:   fontFamily:   sans: [  "Inter var, sans-serif",    fontFeatureSettings: '"cv11", "ss01"',  fontVariationSettings: '"opsz" 32'  >,  ],  >,  >,  > 

Произвольные значения

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

p class="font-['Open_Sans']"> p> 

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

Настройка шрифта по умолчанию

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

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')  module.exports =   theme:   extend:   fontFamily:   'sans': ['Proxima Nova', . defaultTheme.fontFamily.sans],  >,  >  >  > 

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

@tailwind base; @tailwind components; @tailwind utilities; @layer base  html  font-family: Proxima Nova, system-ui, sans-serif; > >

Это лучший подход, если вы настроили утилиты семейства шрифтов, чтобы они имели разные имена, и не хотите, чтобы в вашем проекте была доступна утилита font-sans .

Copyright © 2023 Tailwind Labs Inc.

Как подключить шрифт к сайту с помощью @font-face

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

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

Пошаговая установка

1. Выберите нужный шрифт и нажмите «скачать для сайта».

2. В корне своего сайта создайте папку fonts, и скопируйте в нее скачанные шрифты.

3. Откройте свой CSS-документ и скопируйте в него содержимое текстового файла из архива.

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

5. Готово. Скопируйте свойство с названием семейства и вставьте в селектор, для которого вы прописываете стили.

Что если я уже скачал шрифт в другом месте, и хочу его подключить?

В таком случае вам нужно найти в интернете конвертор шрифтов и преобразовать ваш ttf шрифт (или otf) в нужные форматы, а именно в eot, svg, woff и woff2. Это необходимо для того чтобы шрифт отображался и корректно работал во всех браузерах, а также на мобильных устройствах.

Затем вам нужно самостоятельно прописать правило @font-face, соблюдая его синтаксис.

Синтаксис @font-face

Синтаксис правила можно условно разделить на основные свойства и расширенные.

Основные:

• font-family – указывает название шрифта.
• src – указывает путь шрифта. Это может быть URL шрифта, расположенного на сервере вашего сайта, URL шрифты расположенного на чужом сервере (например, Google Fonts), или просто название шрифта расположенного на компьютере пользователя (Helvetica New Bold, Tahoma, Georgia и т.д.).

Расширенные:

• font-display – определяет как будет отображаться шрифт, в зависимости от того, был ли он загружен и готов ли к использованию.
• font-stretch – позволяет регулировать ширину текста.
• font-style – определяет начертание шрифта – обычное, курсивное или наклонное (последние два это не одно и то же).
• font-weight – устанавливает насыщенность шрифта, по шкале от 100 до 900 (100-сверхсветлое, 900-сверхжирное).
• font-variant — определяет как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера(капитель).
• font-feature-settings – позволяет управлять расширенными типографскими функциями в шрифтах OpenType.
• font-variations-settings – позволяет осуществлять низкоуровневый контроль над вариациями Open Type и TrueType шрифтов, указывая четырехбуквенные названия осей.
• unicode-range – указывает диапазон Unicode кодов(глифов), которые будут использоваться в шрифте.

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

Использование Google Fonts – это наиболее легкий способ подключения шрифта к сайту. Переходите на их сайт, находите нужный шрифт, выбираете нужные начертания для установки и копируете код.

Скопированный код нужно разместить в теле тега head, на вашей странице html.

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

Как подключить скачанный шрифт в css

Главная СтатьиКак использовать Google Fonts и font-display
Поделиться в соцсетях:

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

Одним из важнейших аспектов эффективного использования Google Fonts является понимание CSS свойства font-display , которое определяет, как будет отображаться шрифт вашего сайта в процессе его загрузки. Другими словами, свойство указывает браузеру как долго он должен ждать загрузку шрифта и должен ли он перед этим отображать резервный встроенный шрифт. Используя свойство font-display , вы можете оптимизировать взаимодействие с пользователем, уменьшив влияние медленной загрузки шрифта на внешний вид и производительность вашего веб-сайта.

Как добавить Google Fonts в свой проект

Существует два основных метода добавления Google Fonts в ваш проект: ссылкой и импортом. Также их можно скачать и подключить в стилях с помощью правила @font-face .

Добавление шрифтов Google ссылкой

Это наиболее распространенный способ добавления шрифтов Google в ваш проект. Для этого выполните следующие действия:

1. Зайдите на сайт Google Fonts.
2. Выберите шрифт, который хотите использовать.
3. Кликните на шрифт, чтобы открыть страницу сведений о нем.
4. Выберите нужные стили и жирность шрифта.
5. Если панелька справа с выбранными опциями шрифта не появилась, нажмите иконку «Показать выбранное».
6. В выехавшей панели выберете опцию и вы увидите код для добавления шрифта.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@font-face < font-family: 'Roboto'; src: url('path/to/Roboto-Regular.ttf'); font-weight: normal; font-style: normal; >

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=fallback');

@font-face < font-family: 'Roboto'; src: url('path/to/Roboto-Regular.ttf'); font-weight: normal; font-style: normal; font-display: fallback; >