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

Как загрузить шрифт в html

  • автор:

Загрузка своего шрифта

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

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

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

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

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

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

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

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

Формат
TTF 9 12 4 10 3.1 3.5 2.2
EOT 5
WOFF 9 12 5 11.5 5.1 3.6 4.4
SVG 3.2 3

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

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

Шрифт @font-face < font-family: Pompadur; /* Гарнитура шрифта */ src: url(/example/font/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(font/pompadur.ttf), url(font/pompadur.ttf);
src: local(pompadur), url(font/pompadur.ttf);
src: local(‘bla bla’), url(font/pompadur.ttf);

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

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

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

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

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

Google Web Fonts

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

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

Выбор шрифтов в Google Web Fonts

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

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

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

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

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

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

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

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

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

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

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

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

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

См. также

  • @font-face
  • font-family
  • font-family в CSS
  • Установка шрифта

Подключение шрифтов в CSS

Если не вникать в подробности, по быстрому подключить шрифт можно так:

/* Обычный */ @font-face < font-family: 'FontName'; src: url(/fonts/font.ttf); >/* Жирный */ @font-face < font-family: 'FontName bold'; src: url(/fonts/font-bold.ttf); >.text-1 < font-family: 'FontName'; font-size: 20px; >.text-2

Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:

  • Нет названия шрифта в свойстве local .
  • Подключен только один формат шрифта.
  • Неправильно настроены начертания.

Локальные шрифты

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

@font-face < font-family: 'Font Name'; src: local('Font Name'), url(/fonts/font.ttf); >

Можно указать несколько названий:

@font-face < font-family: 'Font Name'; src: local('Font Name'), local('Font-Name'), url(/fonts/font.ttf); >

Форматы шрифтов

Сегодня используются четыре формата, рассмотрим их подробнее:

TTF/OTF – работают в большинстве браузеров, кроме IE.

TTF / OTF – поддержка в браузерах

EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.

EOT – поддержка в браузерах

WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.

WOFF – поддержка в браузерах

WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.

WOFF2 – поддержка в браузерах

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

  • WOFF2 для современных браузеров.
  • WOFF для браузеров, которые не поддерживают WOFF2.
  • TTF для устаревших браузерах
  • EOT для поддержки IE.
@font-face < font-family: 'Font Name'; src: local('Font Name'), url('/fonts/font.woff2') format('woff2'), url('/fonts/font.woff') format('woff'), url('/fonts/font.ttf') format('ttf'), url('/fonts/font.eot') format('eot'); >

Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов onlinefontconverter.com или convertio.co.

Разные начертания шрифтов

Пример подключения шрифта «Crimson Text» в разных начертаниях:

Обычный:
/* Обычный */ @font-face < font-family: 'Crimson Text'; font-style: normal; font-weight: normal; src: local('Crimson Text'), url('/fonts/CrimsonText-Regular.woff2') format('woff2'), url('/fonts/CrimsonText-Regular.woff') format('woff'), url('/fonts/CrimsonText-Regular.ttf') format('ttf'), url('/fonts/CrimsonText-Regular.eot') format('eot'); >.text-1

Как загрузить шрифт в CSS.

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

Чтобы использовать внешние шрифты нужно проделать два шага:
1)загрузить шрифт браузером:
@font-face font-family:»VivaldiD»;
src: lokal(«C/windows/font/VivaldiD.ttf»), url(«VivaldiD.ttf»)
format(«truetype»);
>
для загрузки шрифта нужно использовать АТ-правлило (@font-face), в конструкции которого нужно определить имя шрифта font-family:, потом при помощи дескриптора src: указать путь локального расположения шрифта, для П.А. поддерживающих только CSS-1, а потом через запятую указать путь для браузеров поддерживающих CSS-2 и CSS-3 и при необходимости указывается формат(format) шрифта.
Для CSS-2 и CSS-3 путь может быть как абсолютным так и относительным. По поводу форматов значения зависят от расширения файла шрифта, мой пример имеет расширение ttf, т.е. TrueTypeFont, значит его формат truetype, есть и другие расширения, а занчит и другие форматы. Задавать формат не обязательно, но есть ситуации когда в пути к шрифту не указывается расширение, тогда формат играет одну из ключевых ролей.
Если в имени файла(шрифта) есть пробелы и даже если путь помещен в кавычках, то браузер InternetExplore его не загружает, можно конечно переименовать шрифт но каким это боком вылезет остается только догадываться.
2)Прописать шрифт нужному элементу, т.е. установить шрифт при помощи font-family: нужному селектору:
BODY
На тот случай если шрифт не удалось загрузить нужно указать его категорию в моем примере serif.
3)При загрузке шрифта нужно указывать типы носителей для которых написаны правила, например загружать шрифты нужно визуальным браузерам(screen) или принтерам(print), а для невизуальных(например звуковых браузеров) бесполезно, вот для этих целей тегу STYLE присваивается атрибут MEDIA принимающего в качестве значний один или список типов носителей.

Смотрите также:

Без образования в жизни ничего не добьешься

Без образования в жизни ничего не добьешься

Сельский офис

Сельский офис

Когда папа программист

Когда папа программист

Как применить шрифт с Google Fonts?

Как с помощью CSS поставить шрифт, если у тебя уже есть с GoogleFonts шрифты?

Отслеживать

11.6k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков

задан 4 авг 2020 в 9:03

Anastasia Vovremya Anastasia Vovremya

361 3 3 серебряных знака 20 20 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Если Вы уже добавили/импортировали шрифт с Google Fonts, то Вам достаточно применить его к нужному Вам элементу (p) или же ко всему документу (body):

p:first-of-type
 

Привет шрифту Roboto!

а тут без шрифта

Отслеживать

ответ дан 4 авг 2020 в 9:26

11.6k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков

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

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