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


Пример №1 — Подключение шрифта PT Sans через Google Fonts

  • Перейдите на сайт fonts.google.com и найдите шрифт PT Sans;
  • Нажмите кнопку Выбрать этот шрифт;
  • Нажмите на Family Selected;
  • На вкладке Настроенные выберите шрифты и кириллицу;
  • Скопируйте строку с соединением шрифта во вкладках EMBED → @IMPORT.

Вставьте строку с соединением в начало файла CSS:

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400i,700,700i');
Войти в полноэкранный режим Выйти из полноэкранного режима

Скопируйте свойство font-family:

Пример #2 — Подключение шрифтов PT Sans и PT Serif в Drupal 8 через файл темы .libraries.yml

Аналогично примеру #1 мы получаем URL подключения шрифтов из строки @import:

fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i|PT+Serif:400,400i,700,700i&subset=cyrillic
Войти в полноэкранный режим Выйти из полноэкранного режима

В файле .libraries.yml темы подключите шрифты в соответствии с примером:

fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i|PT+Serif:400,400i,700,700i&subset=cyrillic: { type: external, minified: true }
Войти в полноэкранный режим Выйти из полноэкранного режима

Сохраните и сбросьте кэш.

Пример №3 — Подключение шрифта PT Sans локально

  • Зайдите в Google Webfonts Helper;
  • Найдите шрифт PT Sans;
  • Выберите надпись и кириллицу;
  • Прокрутите вниз и напишите, где будут располагаться шрифты относительно файла .css;
  • Скопируйте код CSS и вставьте его в файл .css;
  • Скачайте архив со шрифтами, распакуйте его и поместите шрифты в нужное место.

Вот как выглядит скопированный CSS:

/* pt-sans-regular - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Sans'), local('PTSans-Regular'),
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-italic - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Italic'), local('PTSans-Italic'),
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-700 - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold'), local('PTSans-Bold'),
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-700italic - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'),
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это список файлов со шрифтами:

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

Оцените статью
Procodings.ru
Добавить комментарий