Как подключить шрифт в css локально
Со временем, скорее всего, вы захотите изменить шрифт нашего текста. То есть сейчас у нас стандартный шрифт Times New Roman. Он порой не всегда будет подходить под дизайн, он такой не очень-то красивый в целом, поэтому такая потребность возникнет определённо. Давайте теперь разбираться, как это сделать.
Для начала нужно скачать файлы наших шрифтов. В данном случае я решил воспользоваться шрифтом Lato и начертаниями bold и regular, то есть жирненькое начертание или стандартное. Я положил их в папочку «Fonts». Как правило, шрифты распространяются с расширением ttf или otf. Практически любой шрифт можно с лёгкостью найти в интернете. Для этого вводим в Google «Lato шрифт скачать» — очень стандартные фразы, переходим прям по первой ссылочке и скачиываете. Можете полазить по разным сайтикам, поискать. Я, как правило, пользуюсь сайтом webfonts.ru, можете на нём искать какие-то шрифтики.
Как правило, в интернете ходит много уроков о том, что нужно скачивать много разных файлов для шрифтов, там, ttf, otf, ещё какие-то, я уже, честно говоря, не помню. Мол, в разных браузерах шрифты не отображаются и нужно много разных шрифтов подключать. Возможно, да, это правда, но вот сколько на моём опыте я не подключал шрифты, никогда такой проблемы не возникало, поэтому можете смело скачивать либо ttf, либо otf, один шрифт на одно начертание, и будет вам счастье.
Итак, мы скачали шрифты, что делать дальше? Дальше нужно в файле «style.css» подключить этот шрифт. Я уже прописал заготовочку кода, можете смело её копировать и себе вставлять, она будет работать.
@font-face < font-family: font /* имя шрифта для CSS правил */ src: local("font"), /* проверяем наличие шрифта в ОС пользователя */ url(fonts/font.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */ > Давайте разберёмся, что здесь написано и как это использовать. Ну, комментарии тут уже есть, поэтому можете на будущее их читать, но давайте всё-таки повторимся.
Первым параметром прописываем «font-family» и прописываем название нашего шрифта, который мы будем дальше использовать для того, чтобы использовать его на странице.
«Src» — здесь прописываем локальное название файла, то есть мы проверяем, есть ли этот шрифт у нас в системе встроенный. Если он не встроен, то мы идём по прописанному пути и находим файлик нашего шрифта. Если находится, то просто берётся из системы.
Для того, чтобы шрифт заработал, необходимо шрифт подключить на страницу. Для этого мы прописываем в каком-то определённом теге, в котором мы хотим задать данный шрифт, в нашем случае в «body», потому что мы хотим, чтобы шрифт работал во всем сайте.
body
То есть таким образом, скачиваете шрифт, кладёте в папочку «fonts», подключаете с помощью «font-face», прописываете название, локальное название, путь к этому файлику и где-то на странице указываете, где вы хотите использовать этот шрифт.
Дальше, может возникнуть такая ситуация, что вам нужно сделать какие-то жирненькие буковки. Скорее всего, вы будете делать с помощью тега «b», куда не проще. Для всех начертаний шрифтов лучше использовать шрифты, которые есть у вас в заготовке. В данном случае, вот, есть «bold», давайте для тега «b» подключим именно вот этот шрифт «bold».
Соответственно, если вам нужно курсивное начертание, то делаете точно так же, но только для курсивного, для тега «i».
И ещё один момент. Тег «b» изначально добавляет к шрифту жирность. Для него стандартно задаётся свойство «font-weight», о котором я уже рассказывал. Поэтому «font-weight» сделаем «normal», если мы задаем тег «b». Для тега «i» зададим «font-style» тоже «normal», чтобы наш браузер не назначал для тега «b» и тега «i» свою жирность и свою курсивность, чтобы это всё работало только за счёт шрифта. Поэтому сбрасываем стандартные какие-то свойства: для тега «i» — «font-style», для тега «b» — «font-weight», и в «font-family» прописываем наш шрифт, который мы должны заранее подключить.
Собственно, вот так работает подключение шрифтов. Всё довольно-таки просто, ничего сложного: скачиваете, подключаете к странице и прописываете, где вы хотите его использовать. Всё очень просто, всё очень легко. На этом с шрифтами пока что закончим.
Тестирование
Чтобы пройти тестирование, необходимо войти или зарегистрироваться