Как установить шрифт на сайт css
Перейти к содержимому

Как установить шрифт на сайт css

  • автор:

Добавление шрифта на сайт CSS

Добавление шрифта на сайт CSS

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

Добавление шрифта на сайт или блог

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках (h1) нашего сайта или блога. Для этого выполняем следующие действия:
❶ В корневой папке сайта создаём папку «fonts» и копируем туда наш Raleway.ttf;
❷ В самом низу файла стилей(style.css) прописываем правило:

@font-face < // название шрифта(чтобы не запутаться лучше указать название папки со шрифтом) font-family: "RalewayRegular"; // адрес шрифта и тип src: url("../fonts/RalewayRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; >

❸ А также в файле стилей задаём правило для всех заголовков:

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

@font-face < font-family: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; >@font-face< font-family: "RalewayBold"; src: url("../fonts/RalewayBold.ttf") format("truetype"); font-style: normal; font-weight: normal; >

Скачать отличные русские шрифты для своего ресурса вы можете на нашем сайте: Раздел Все для вебмастера ⇒ ⇓ Шрифты для сайта.

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

Шрифты — одна из базовых вещей, которые используются при разработке сайта. Наряду с картинками, файлами css, js — шрифты незаменимый элемент современного сайта. Поэтому часто у верстальщиков (и не только) возникает вопрос — как подключить шрифт к сайту? И как это можно сделать с помощью css. Давайте разберемся с различными вариантами подключения шрифта к html странице.

Важное уточнение

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

Подключение с помощью CSS через @font-face

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

Пример подключения шрифта через font-face:

@font-face < font-family: 'MyFont'; src: url(../fonts/MyFont.ttf') format('truetype'); >

Давайте разберем синтаксис. Что мы только что сделали. Построчно.

font-family — задали название нашего шрифта. Затем, когда мы захотим, например, задать всем h1 этот шрифт, достаточно в CSS прописать следующее:

Далее src. С помощью этого свойства мы указываем путь к нашему шрифту. В нашем конкретном случае файл MyFont.ttf находится в папке fonts, которая на один уровень выше от нашего css файла, в котором и выполняется данный код. Можно также указать url-адрес, по которому доступен шрифт.

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

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

@font-face < font-family: 'MyFont'; src: url('webfont.eot'); /* Поддерживается в IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Для супер современных браузеров */ url('webfont.woff') format('woff'), /* Для супер современных браузеров */ url('webfont.ttf') format('truetype'), /* Для Сафари, Андроид, iOS и почти всех других */ url('webfont.svg#svgFontName') format('svg'); /* Для iOS */ >

Браузер сам выберет нужный ему шрифт. Список доступных форматов: «woff», «woff2», «truetype», «opentype», «embedded-opentype», и «svg».

Если вы хотите подключить несколько разных шрифтов, то можете несколько раз использовать @font-face.

Как подключить шрифт с Google Fonts

Довольно часто нужный шрифт находится в популярной библиотеке Google Fonts.

Подключить шрифт с Google Fonts на сайт можно разными методами.

Например, вы можете сказать понравившийся шрифт и затем добавить его с помощью @font-face, о которой я рассказал вам выше.

Также есть еще варианты.

Находите нужный вам шрифт.

Выбираете нужное начертание (font-weight):

Затем, в правом верхнем углу нажимайте на иконку «View selected families»:

У вас появится окно, где вы можете выбрать способ, как добавить шрифт на сайт: через link или @import. Link (выбрано по умолчанию) — вам достаточно копировать код и вставить внутри тега (1 на изображении ниже). Далее, вы можете задавать элементам нужный шрифт с помощью CSS (2 на изображении ниже).

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

Если вы прочитали статью, а шрифт все еще не подключается, то пишите в комментариях — мы рассмотрим ваш код вместе.

Подключение Google Fonts

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

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

Для того, чтобы подключить шрифт от Google Fonts, перейдите в настройки сайта → Шрифты и Цвета и нажмите на кнопку «Расширенные настройки».

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

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

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

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

После выбора в поле ссылки для Google Fonts автоматически подставится нужная ссылка для его подключения. Сохраните изменения. Шрифт подключен — теперь его параметрами можно управлять при редактировании страниц.

Как подключить шрифт в React

Рассмотрим три быстрых способах подключения шрифтов в React приложение.

font В HTML используется для указания начертания, размера шрифта, типографики текста. Вы можете добавить шрифты в свое React приложение разными способами.

Способ 1. С использованием link

Мы можем ссылаться на любые шрифты из Интернета, с помощью тега внутри HTML-файла. Рассмотрим пример применения Google Fonts шрифта с помощью тега .

  1. Переходим в fonts.google.com
  2. Кликаем на шрифт

Реакт добавить шрифт

  1. Кликаем на “Select Regular 400” (или на любые другие выбранные виды, можно несколько)

Реакт добавить шрифт

  1. Нажимаем на иконку “View selected families” сверху справа.

Реакт добавить шрифт

Реакт добавить шрифт

  1. В появившемся боковом меню переходим в секцию “Use on the web” и копируем код, расположенный под
  1. Переходим в index.html . Если ваше приложение создано с помощью create-react-app , то index.html находится в папке public . Вставляем код, скопированный в п.5 внутрь .

Реакт добавить шрифт

  1. На сайте Google Fonts в том же боковом меню находим секцию “CSS rules to specify families” и копируем код.
  1. Переходим в CSS файл и добавляем следующий стиль, вставляем скопированный код:
.font-roboto < font-family: 'Roboto', sans-serif; /* скопированный код */ >
  1. Применяем этот стиль в любом React компоненте
// App.jsx import './App.css'; function App() < return ( 

Hello

); > export default App;

Способ 2. С использованием Web Font Loader

  1. Установим webfontloader
yarn add webfontloader
npm i webfontloader
  1. Импортируем webloader в компонент
import WebFont from 'webfontloader';
  1. Загружаем нужные шрифты, используя имя шрифта. Лучше использовать хук useEffect и позволить ему выполняться один раз при загрузке компонента. Поскольку шрифты должны быть загружены только один раз в приложении, вы можете загрузить их в файле index.js .
useEffect(() => < WebFont.load(< google: < families: ['Droid Sans', 'Chilanka'] >>); >, []);
  1. Теперь вы можете использовать эти шрифты в компоненте React с помощью атрибута className или style . Чтобы использовать атрибут className , создайте CSS-класс в файле .css .
.font-loader

Затем, в методе render() компонента добавьте следующее.

 
Hello, World!

Или, с атрибутом style

>> Hello, World!

Способ 3. С использованием @font-face

Иногда шрифты должны быть загружены локально и упакованы в приложение. @font-face - это правило CSS для определения имени шрифта путем указания на него с помощью URL.

  1. Создадим папку fonts в каталоге src .
  2. Загрузим необходимые шрифты. В этом примере мы загрузим шрифт Lobster . Для этого выберем шрифт в Google Fonts, нажмем “Download family” и распакуем архив.

Реакт добавить шрифт

  1. Скопируем содержимое в папку src\fonts .

Реакт добавить шрифт

  1. Затем импортируем шрифты в файл index.js .
import './fonts/Lobster/Lobster-Regular.ttf';
  1. В файл index.css добавим
@font-face < font-family: "LobsterRegular"; src: local("LobsterRegular"), url("./fonts/Lobster/Lobster-Regular.ttf") format("truetype"); font-weight: normal; >
  1. Теперь добавим имя класса в файл App.css , который использует этот шрифт.
.font-lobster
  1. Применяем этот стиль в любом React компоненте
// App.jsx import './App.css'; function App() < return ( 

Hello

); > export default App;

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *