Подключение шрифтов
Как можо подключить шрифт к своему сайту и какие есть способы подключения шрифтов?
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 - смотреть
О предварительной загрузки шрифта - смотреть