Содержание страницы
домикГлавная / Элементы html и css / Как подключить шрифт к html
подключить шрифт к htmlКаждый вебмастер использует на своём сайте шрифты html на своё усмотрение, - здесь дело вкуса. Но не все знают как правильно подключить шрифт к html, особенно если этот шрифт не находится на локальном компьютере пользователя.
В этой статье мы как раз и разберём, как сделать на сайте отображение текста с помощью любого шрифта html.

Для того, чтобы подключить шрифт к html документу, и задать определённый шрифт к примеру, для параграфа, заголовка, либо для всего текста, необходимо в css сделать запись следующего типа:
htmlCOPY
<style> h1 { font-family: Arial, 'Times New Roman', Verdana; font-size: 20px; font-style: italic; font-weight: bold; } </style>

Пояснение прописанного кода:

  • font-family - задаётся название шрифта;
  • font-size - задаётся размер шрифта;
  • font-style - задаётся наклонность шрифта, по умолчанию normal - обыкновенный;
  • font-weight - задаётся начертание шрифта ( normal (по умолчанию) - обыкновенный, bold - жирный ).
В данном примере я показал наиболее часто прописываемые параметры при подключении шрифта html. Я не зря подключил для font-family сразу несколько шрифтов. Дело в том, что не всегда прописанные шрифты могут присутствовать у конечного пользователя, и в данном случае браузер будет отображать именно тот шрифт, который есть у пользователя на компьютере. Выборку он будет делать слева направо, как прописано для font-family.

Обратите внимание:
Если название шрифта состоит из двух и более слов, то оно в обязательном порядке заключается в кавычки.
Такие семейства шрифтов как: Arial, Tahoma, Georgia, Times New Roman, Verdana и многие другие практически имеются у всех пользователей, но как быть, если вы захотите использовать не стандартный шрифт html. Для этого вам нужно скачать нужный шрифт с любого онлайн портала, которые предоставляют на выбор массу шрифтов.

После этого, скачанные файлы со шрифтами положить в папку ( условно ) fonts.

Допустим вы скачали шрифт html CocaCola и хотите подключить его к своему сайту. Для этого пропишите в css следующий код:
cssCOPY
@font-face { font-family: 'CocaColaRegular'; src: url('fonts/CocaColaRegular/CocaColaRegular.eot'); src: url('fonts/CocaColaRegular/CocaColaRegular.eot') format('embedded-opentype'), url('fonts/CocaColaRegular/CocaColaRegular.woff')format('woff'), url('fonts/CocaColaRegular/CocaColaRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
Вот таким образом мы указали браузеру название и местоположение нашего шрифта ( вы пропишите свои названия шрифтов и пути до файлов ). И теперь, чтобы любой текстовый элемент отобразился с помощью этого шрифта, нам нужно к этому элементу данный шрифт html подключить.
cssCOPY
p { font-family: CocaColaRegular; font-size: 16px; }
В этом коде я указал, что все параграфы на моей странице будут отображаться с помощью указанного мною шрифта и иметь размер 16px.

Совет!
Чтобы меньше было проблем, прописывайте абсолютный путь до вашего шрифта, к примеру так:
cssCOPY
src: url('http://ваш_сайт.ru/fonts/CocaColaRegular/CocaColaRegular.eot');
Дата публикации: 19.05.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!