Главная » HTML5 » Оформление текста » Подключение шрифтов
51 0  

Подключение шрифтов

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

1. Подключение сторонних шрифтов (с других сайтов или сервисов):

<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">


2. Подключение своих шрифтов (на своем сайте):

Пример:

<link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
  • значение rel - preload указывает, что браузер должен предварительно загрузить этот ресурс
  • атрибут as указывает на определенный класс загружаемого контента.
  • Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса  CORS.

3. можно подключить и через CSS:

- Смотреть здесь



--- Источники:
О поддержке @font-face - смотреть

О предварительной загрузки шрифта - смотреть

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020