Раскрываем вопросы:
• Как узнать какой шрифт?
• Где скачать этот шрифт.
• Как подключить шрифт при помощи css.
• Расширение Visual Studio Code для работы со шрифтами.
Как узнать какой шрифт?
Устанавливаем расширение для браузера Fontstorage. На странице сайта с интересным шрифтом нажимаем на значок расширения в правом верхнем углу для того что бы открылась информационная панель. Выделяем нужное слово и смотрим имя шрифта и цвет в информационной панели.
Также нажав на кнопку css можно посмотреть другие характеристики шрифта в таком формате:
font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, Arial;
font-weight: 700;
font-style: normal;
font-size: 48px;
line-height: 57.6px;
color: rgb(220, 102, 85);
Теперь находясь на любом сайте вы сможете сразу узнать шрифт текста и можно не спеша начать составлять свою личную коллекцию shrift.
Где скачать шрифт?
Скачать шрифт можно на сайте Fontstorage.com Можно воспользоваться поиском или смотреть все по порядку.
Скачивание:
Кнопка-Download font-> Кнопка-Web fonts & subsetting
Скачивается архив с тремя файлами:
Содержимое файла Font.css копируем в ваш файл css- этим мы подключим шрифт (пути указаны с учетом, что файл css и файлы Font.woff и Font.woff2 лежат в одной директории).
@font-face {
font-family: 'Font';
src: url('Font.woff2') format('woff2'), url('Font.woff') format('woff');
font-weight: 400;
font-style: normal;
}
Файлы Font.woff и Font.woff2 закидываем туда же где ваш файл css.
Теперь все должно работать. (одну причину назову почему может не работать забыли изначально подключить ваш css файл к html или php файлу)
Расширение шрифты для Visual Studio Code
Имя расширения: Webfont
Расширение позволяет находить и подключать шрифт непосредственно в файл CSS.
Как работает?
Щёлкаем в области редактора CSS правой кнопкой и выбираем Webfont.
Выбираем шрифт либо ищем в поиске.
Import font- вставка ссылки на шрифт, сам шрифт хранится на внешнем сервере. Ниже представлен пример кода.
/* Please do not use this import in production. You could download this font from here https://fontstorage.com/font/20db */
@import"https://fonts.fontstorage.com/import/20db.css";
/*
20 db, 400
*/
Download font(ttf/otf)- скачать шрифт в двух форматах и подключающий файл CSS- можно посмотреть и загрузить файлы для дальнейшего использования на своем хостинге, с внешнего ресурса.
Subsetting- добавления национального языка, на внешнем ресурсе.
View on website- посмотреть абзац написанный выбранным шрифтом, на внешнем ресурсе.