Часто для собственных разработок приходится думать как дизайнер, подбирать цветовую гамму, искать шрифты. Сегодня мы разберемся со шрифтами.
Я часто смотрю какие шрифты используются на популярных сайтах, какие шрифты впихивают десигнеры в макеты, какие шрифты самостоятельно подрубают разрабы, ну и наконец, какие шрифты нравятся мне самому.
Стоит отметить, что мой испорченный вкус в подборе шрифтов мало участвует и нравятся мне эти шрифты именно с технической точки зрения. Они универсальны, имеют много начертаний и поддерживают подавляющее количество популярных языков.
Топ шрифтов
- Roboto - лидер на всех сайтах. Это, очевидно, аккуратный шрифт без всяких хитрых засечек, правильные пропорции и разработал его гугл.
- Noto Sans JP - новенький шрифт от того же гугла. Похож на предыдущий, чуть менее строгое начертание. Отлично зайдет в заголовки и контент.
- Lato - шрифт, на случай если надоели предыдущие. Чуть более квадратные пропорции и, имхо, красивые знаки препинания.
- Montserrat - любимец у десигнеров. Обычно им оформляются заголовки h1,h2... но также хорошо он заходит и для простого текста.
- Ubuntu - шрифт с интересным мягким начертанием, создавался для ОС Ubuntu, но грех его не использовать в своих проектах. Возможно, больше впишется на сайты ориентированные для детей.
Не смотря на место в топе, последнее время я часто применяю Ubuntu.
🇷🇺 Все шрифты поддерживают кириллицу
🔆 Все шрифты можно получить бесплатно на Google Fonts
Рекомендую скачивать их к себе и объявлять в CSS, так мы не будем зависеть от доступности серверов гугла. Сейчас расскажу как это делать.
Подключение своих шрифтов в CSS
1. Скачиваем шрифт с Google Fonts
2. Удаляем ненужные нам шрифты, дабы они нас не смущали, а мы очень смутимые.
3. Скорее всего шрифты будут в одном формате. Но, мы хотим делать кроссбраузерные и кроссплатформенные сайты, поэтому прогоняем их через этот сервис, выставляем такие настройки, тыкаем Convert.
4. На выходе у нас готовый пакет для подключения шрифта:
5. Создаем папку fonts в папке проекта и закидываем туда всё это добро (кроме demo.html).
6. Подключаем файл stylesheet.css в html файле и используем шрифты указав свойства font-family и font-weight для нужного класса.
Подписывайся на канал, а то че как это самое 🦭
#шрифты #html5 #css3 #web