Как добавить шрифт в html
Перейти к содержимому

Как добавить шрифт в html

  • автор:

Свой шрифт на странице

Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.

Если у вас на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку.

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам . Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

  • Текст легко добавлять и править.
  • В браузере можно пользоваться поиском и находить желаемые фразы.
  • В настройках браузера можно уменьшать или увеличивать размер шрифта добиваясь комфортного просмотра.
  • Поисковые системы хорошо индексируют содержимое документа.
  • Текст можно выделить и скопировать в буфер, а также перевести на другой язык.
  • Параметры текста вроде межстрочного расстояния, цвета, размера и тому подобное легко менять с помощью свойств CSS.
  • К тексту опять же через CSS просто добавлять разные эффекты, например тень.

Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.

  • Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
  • Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы

Формат Internet Explorer Chrome Opera Safari Firefox Android iOS
TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
EOT 5.0-8.0
WOFF 9.0+ 5.0+ 3.6+
SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+

Самый поддерживаемый формат — TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

    Шрифт @font-face < font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ >h1 

Современный элемент политического процесса

По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.

Вначале загружаем сам файл шрифта с помощью правила @font-face . Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.

Результат данного примера показан на рис. 1.

Заголовок с загруженным шрифтом

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда — файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных мной сайтов оказался один, показавший текст в IE правильно.

Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local(‘bla bla’), url(fonts/pompadur.ttf);

Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.

Пример 2. Подключение EOT

HTML5 CSS3 IE Cr Op Sa Fx

    Шрифт @font-face < font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.eot); /* Для IE5-8 */ src: local(pompadur), url(fonts/pompadur.ttf); /* Для остальных браузеров */ >h1 

Современный элемент политического процесса

По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.

Что касается iOS, то делать и загружать отдельный шрифт в формате SVG как мне кажется нет особого смысла. Аудитория сайтов просматривающая его через iOS пока невелика, к тому же версию сайта под мобильные устройства стараются облегчить, и загружать дополнительные несколько десятков килобайт не желательно.

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts. Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

Загружаемые на страницу шрифты

Рис. 3. Загружаемые на страницу шрифты

Подключить выбранные шрифты можно одним из трёх путей, добавляемый код можно скопировать ниже по странице.

1. Через элемент . Строка будет иметь примерно следующий вид.

2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

  • Шрифты свободны для использования, вам не нужно за них платить.
  • Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
  • Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.

Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.

Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.

Шрифты в HTML (font, font-family, font-face)

На текущий момент шрифты — это одна из главных особенностей сайтов. Шрифты бывают как платными, так и бесплатными. При создании сайотов дизайнеры тратят большое количество времени, чтобы подобрать шрифты.

В этой статье мы разберём сначала системные бесплатные шрифты, а потом научимся подключать шрифты из файлов.

Веб безопасные шрифты

Шрифт можно указать с помощью CSS свойства «font-family». Если перевести дословно название этого свойства, то получится «семейство шрифтов». В значении этого свойства необходимо указать название шрифта. К примеру:

Тише, мыши, кот на крыше.

На странице с таким кодом будет показан текст, написанный шрифтом Arial

Тише, мыши, кот на крыше.

Но текст будет написан этим шрифтом только в том случае, если этот шрифт есть у пользователя, который просматривает сайт. Если этого шрифта нет в его системе, то будет выбран стандартный. Поэтому если вы не хотите подключать файлы шрифтов в CSS, то стоит указать в качестве шрифта один из так называемых «веб безопасных шрифтов». Эти безопасные шрифты точно будут отображаться на любой системе. Вот список их названий и примеры:

Arial: Тише, мыши, кот на крыше. Arial: Тише, мыши, кот на крыше. Verdana: Тише, мыши, кот на крыше. Georgia: Тише, мыши, кот на крыше. Impact: Тише, мыши, кот на крыше. Arial Black: Тише, мыши, кот на крыше. Comic Sans MS: Тише, мыши, кот на крыше. Trebuchet MS: Тише, мыши, кот на крыше. Courier New: Тише, мыши, кот на крыше. Times New Roman: Тише, мыши, кот на крыше. 

В разных операционных системах шрифты могут выглядеть по-разному из-за авторских прав. К примеру, шрифта «Times New Roman» нет на операционной системе Linux (а на этой системе работает большинство мобильных устройств). В таких случаях система будет подставлять шрифт, который похож на требуемый, но не идентичен ему.

Можно указать несколько шрифтов через запятую. Тогда если в системе нет шрифта, то будет взят следующий из списка.

Тише, мыши, кот на крыше.
  • serif — шрифт с засечками на концах букв. К примеру, Times New Roman
  • sans-serif — шрифт без засечек. К примеру, Arial
  • cursive — курсивный шрифт
  • fantasy — декоративный шрифт
  • monospace — моноширинный шрифт (все буквы одинаковой ширины)
Тише, мыши, кот на крыше.

Шрифты в подключаемых файлах (font-face)

Чтобы специфический шрифт сайта попал к пользователю, файл со шрифтом необходимо передать. Делается эта загрузка благодаря CSS правилу @font-face. Чтобы загрузить файл шрифта, необходимо сначала положить его к себе на сайт или узнать ссылку на него на других сайтах. После того как будет получена ссылка на файл шрифта, на HTML странице можно подключить его и задать этот шрифт тексту через свойство font-family. Приведём пример HTML кода вместе со стилями:

  Тише, мыши, кот на крыше.
  • font-family — указывается название шрифта. Это название необходимо использовать далее в CSS правилах.
  • url(‘ . ‘) — указывается абсолютная или относительная ссылка на файл шрифта. У файлов шрифтов есть разные расширения: ttf, eot, woff, woff2. Некоторые браузеры умеют понимать одни файлы, другие нет. Поэтому часто указывается несколько файлов шрифтов с разными расширениями.

Шрифты замедляют загрузку страницы. Ведь CSS правила читаются последовательно. И пока не закончится загрузка файлов шрифтов, указанных в @font-face, то страница не начнёт отображаться. Поэтому если хотите ускорить загрузку своего сайта, то подключайте их в самом конце страницы. Либо используйте веб безопасные шрифты. С другой стороны, достаточно загрузить шрифт один раз — потом он попадает в кеш.

Как подключить шрифт к сайту с помощью CSS и не только

Шрифты — одна из базовых вещей, которые используются при разработке сайта. Наряду с картинками, файлами css, js — шрифты незаменимый элемент современного сайта. Поэтому часто у верстальщиков (и не только) возникает вопрос — как подключить шрифт к сайту? И как это можно сделать с помощью css. Давайте разберемся с различными вариантами подключения шрифта к html странице.

Важное уточнение

Не все сайты работают одинаково. Поэтому некоторые методы не будут актуальны для решения вашей задачи. Это статья больше ориентирована на людей, которые сталкивались с HTML и CSS, а также имеют возможность редактировать файлы на своем сайте.

Подключение с помощью CSS через @font-face

В CSS есть такое правило font-face, которое позволяет подключить нужный шрифт к сайту.

Пример подключения шрифта через font-face:

@font-face < font-family: 'MyFont'; src: url(../fonts/MyFont.ttf') format('truetype'); >

Давайте разберем синтаксис. Что мы только что сделали. Построчно.

font-family — задали название нашего шрифта. Затем, когда мы захотим, например, задать всем h1 этот шрифт, достаточно в CSS прописать следующее:

Далее src. С помощью этого свойства мы указываем путь к нашему шрифту. В нашем конкретном случае файл MyFont.ttf находится в папке fonts, которая на один уровень выше от нашего css файла, в котором и выполняется данный код. Можно также указать url-адрес, по которому доступен шрифт.

Помимо src есть еще свойство local. Мы можем сказать браузеру, чтобы он искал на локальном компьютере пользователя определенный шрифт. Это может сократить время загрузки страницы, если у пользователя будет на компьютере установлен текущий шрифт.

Кстати, мы можем задать сразу несколько форматов одного и того же шрифта (для лучшей поддержки в различных браузерах):

@font-face < font-family: 'MyFont'; src: url('webfont.eot'); /* Поддерживается в IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Для супер современных браузеров */ url('webfont.woff') format('woff'), /* Для супер современных браузеров */ url('webfont.ttf') format('truetype'), /* Для Сафари, Андроид, iOS и почти всех других */ url('webfont.svg#svgFontName') format('svg'); /* Для iOS */ >

Браузер сам выберет нужный ему шрифт. Список доступных форматов: «woff», «woff2», «truetype», «opentype», «embedded-opentype», и «svg».

Если вы хотите подключить несколько разных шрифтов, то можете несколько раз использовать @font-face.

Как подключить шрифт с Google Fonts

Довольно часто нужный шрифт находится в популярной библиотеке Google Fonts.

Подключить шрифт с Google Fonts на сайт можно разными методами.

Например, вы можете сказать понравившийся шрифт и затем добавить его с помощью @font-face, о которой я рассказал вам выше.

Также есть еще варианты.

Находите нужный вам шрифт.

Выбираете нужное начертание (font-weight):

Затем, в правом верхнем углу нажимайте на иконку «View selected families»:

У вас появится окно, где вы можете выбрать способ, как добавить шрифт на сайт: через link или @import. Link (выбрано по умолчанию) — вам достаточно копировать код и вставить внутри тега (1 на изображении ниже). Далее, вы можете задавать элементам нужный шрифт с помощью CSS (2 на изображении ниже).

Вариант с @import ничем не отличается, однако, если вы уберете в коде, который предлагается скопировать, то можете вставлять @import прямо в главный css файл. Вариант с @import позволяет быть более гибким, однако, требует больше внимания.

Если вы прочитали статью, а шрифт все еще не подключается, то пишите в комментариях — мы рассмотрим ваш код вместе.

Как подключить шрифты для сайта? Сотни бесплатных шрифтов.

Привет, с вами Сергей Никонов. Недавно мне задали вопрос — Где найти хорошие шрифты для сайта, желательно бесплатные?

Перейди по адресу fonts.google.com и для твоего сайта ты найдешь сотни подходящих тебе бесплатных шрифтов, которые можно подключить к сайту всего за несколько секунд.

Видео Как встроить шрифт на сайт

Сверху можно сделать поиск по названию нужного нам шрифта, например Roboto.

В следующее поле — это текст или цифры, чтобы заранее увидеть как этот текст или цифры будут выглядеть для разных шрифтов. Также ты можешь сам написать любой текст и посмотреть, как будет выглядеть написанный текст с тем или иным шрифтом для сайта.

Google Fonts. Шрифты для сайта как подключить.

Здесь можно выбрать и размер шрифта и есть еще несколько параметров, которые относятся только к отображению — это выбор цвета бекграунда сайта и вид отображения шрифтов на сайте Google.

Есть возможность выбрать шрифты с засечками, без засечек и другие параметры шрифтов. Особое внимание уделите фильтру Language. Если язык твоего сайта основан на кириллице, например язык сайта на русском, украинском, белорусском, болгарском, молдавском и других языках — выбирай Cyrillic или Cyrillic Extended, если английский или языки в основу которых входит латиница — выбирайте Latin.

Языки для Google Fonts

Если твой язык входит в этот список, например тайский, тебе нужно выбрать его.

Иначе, если ты неправильно выберешь этот параметр шрифта, вместо букв, на сайте ты увидишь прямоугольники и другие фигурки.

Примерно так:

Ошибка при выборе кодировки шрифта

Когда ты нашел шрифт для сайта, который тебе очень понравился, ты можешь встроить его несколькими способами:

Как встроить шрифт на сайт. Способ первый.

Вставить в html-страницу и затем в css-стилях указать нужный шрифт, скопировав его их этого окна. То есть так:

В css-стили:

body

Как встроить шрифт на сайт. Способ второй.

Или ты можешь импортировать его прямо в css-стили через ключевое слово @import и указать font-family в нужный тебе блок стилей.

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,400&display=swap'); body

Как встроить шрифт для Windows или Photoshop (Фотошоп).

Ты можешь даже скачать нужный тебе шрифт, для этого нажми на стрелку сверху справа. Кстати, скаченный шрифт ты можешь установить в свою систему, просто два раза нажми на загрузившийся файл шрифта, нажми на кнопку Установить и потом ты можешь выбрать установленный шрифт в любой программе, например в Photoshop.

Еще ты можешь кастомизировать понравившийся тебе шрифт, то есть выбрать только нужные тебе параметры шрифта. Для этого перейди на вкладку CUSTOMIZE и выбери нужные тебе параметры шрифта для сайта. Например, от этого шрифта ты хочешь использовать только жирный стиль bold 700 или наклонное начертание шрифта italic. Также здесь ты можешь выбрать какие языки этот шрифт должен поддерживать.

Но помни самое главное. Старайся выбирать параметры только те, которыми ты реально будешь пользоваться, иначе твой сайт будет загружаться медленнее, за счет большого объема файла шрифта. Тебе кстати поможет этот указатель Load Time. Если указатель зеленый и ты видишь надпись Fast, значит все хорошо. Нужно пересмотреть выбор параметров, если указатель желтого или красного цвета. Например, если выбрать множество дополнительных стилей.

Долгая загрузка шрифта для сайта

Выводы

Теперь ты умеешь находить и подключать шрифты для твоего сайта. Если у тебя остались вопросы, задать их ты можешь в комьюнити FructCode.

Подпишись на канал FructCode, поставь ставь Like и нажми на колокольчик, чтобы не пропускать новые видео.

С вами был Сергей Никонов и помни, что все мои актуальные курсы по программированию и верстке ты можешь найти только на моем сайте FructCode.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *