Как подключить шрифт к сайту css из папки
Перейти к содержимому

Как подключить шрифт к сайту css из папки

  • автор:

Создание пользовательских тематических CSS-файлов в SharePoint

Узнайте, как добавить разметку стилей комментариев в CSS-файл, чтобы его можно использовать в механизме темы SharePoint.

Общие сведения о заметках

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

В этой статье описываются доступные заметки и регистрация CSS-файлы.

Добавление заметок в пользовательские CSS — файлы

Заметки сообщить engine темы SharePoint как свойства темы в CSS-файл. В этом разделе описываются доступные заметки и как их использовать.

Заметка ReplaceColor

Заметка ReplaceColor заменяет значение цвета указанным цветом темы. Его можно использовать со свойствами CSS, которые определяют значение цвета, например цвет, цвет фона, границы и т. д.

Ниже приводится формат ReplaceColor заметки.

/* [ReplaceColor(themeColor:"ColorSlot"[, themeShade:"ShadeValue"][, themeTint:"TintValue"][, opacity:"OpacityValue"])] */ 

Замените ColorSlot на имя заметки цветового слота для использования. Чтобы просмотреть список доступных цветовых слотов, обратитесь к разделу Сопоставление цветовых слотов в статье Цветовые палитры и шрифты в SharePoint.

Используйте параметр необязательно themeShade, если вы хотите затемнить цвет темы. Замените ShadeValue числовое значение от 0,0 (без изменений) для версии 1.0 (самый темный).

Используйте параметр необязательно themeTint, если вы хотите осветлить цвет темы. Замените TintValue числовое значение от 0,0 (без изменений) для версии 1.0 (очень светлый).

Используйте параметр необязательно opacity, если вы хотите задать непрозрачность цвет темы. Замените OpacityValue числовое значение, указывающее, непрозрачность. Непрозрачность параметр в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полная непрозрачность).

Ниже приведены примеры ReplaceColor заметки, используемых в CSS-файл.

  • /* [ReplaceColor(themeColor:»BodyText»)] */ color:#444;
  • /* [ReplaceColor(themeColor:»BackgroundOverlay»,opacity:»0.5″)] */ background-color:#fff;
  • /* [ReplaceColor(themeColor:»EmphasisBackground»,themeTint:»0.05″)] */ background-color:#f2faff;

Заметка ReplaceFont

Заметки ReplaceFont добавляет шрифт темы указанного списка доступных шрифтов. Его можно использовать со свойствами CSS font и font-family.

Ниже приводится формат ReplaceFont заметки.

/* [ReplaceFont(themeFont:"FontSlot")] */ 

Замените FontSlot именем используемого слота шрифтов. Чтобы просмотреть список доступных слотов шрифта, обратитесь к разделу Слоты шрифтов в статье Цветовые палитры и шрифты в SharePoint.

Ниже показан пример ReplaceFont заметки. В этом примере Если разъем body шрифтов определяется как Courier в теме, Courier добавляются как первый элемент в списке доступных шрифтов в мастере Choose the Look.

  • /* [ReplaceFont(themeFont:»body»)] */ font-family:»Segoe UI»,»Segoe»,Tahoma,Helvetica,Arial,sans-serif;

Заметка ReplaceBGImage

Заметки ReplaceBGImage заменяет фонового изображения в CSS-файл фонового изображения темы. Его можно использовать со свойствами CSS background и background-image.

Ниже приводится формат ReplaceBGImage заметки. Заметки ReplaceBGImage можно также использовать с фильтром AlphaImageLoader для поддержки более ранних версий Internet Explorer.

/* [ReplaceBGImage] */ 

Заметка RecolorImage

Заметки RecolorImage recolors указываемое изображение.

Следующие описывает формат RecolorImage заметки.

/* [RecolorImage(themeColor:"ColorSlot"[, method:["Tinting"|"Blending"|"Filling"]][, includeRectangle: )] */ 

Замените ColorSlot именем заметки цветового слота. Чтобы просмотреть список доступных цветовых слотов, обратитесь к разделу Сопоставление цветовых слотов в статье Цветовые палитры и шрифты в SharePoint.

Используйте параметр необязательно method, если вы хотите указать метод recoloring.

Используйте параметр необязательно includeRectangle, если вы хотите изменить цвет для отдельного региона изображения. Замените x-Setting, y-Setting, RegionWidth и RegionHeight на x-координаты, y-координаты, ширину и высоту области, которую требуется перекрасить.

Ниже приведены примеры RecolorImage заметки, используемых в CSS-файл.

  • /* [RecolorImage(themeColor:»SubtleBodyText»,method:»Tinting»)] */ background-image:url(«/_layouts/15/images/tabtitlerowbottombg.png?rev=23»);
  • /* [RecolorImage(themeColor:»BodyText»,method:»Filling»,includeRectangle:)] */ background:url(«/_layouts/15/images/spcommon.png?rev=23») no-repeat -161px -178px;

Отправка CSS – файла в тематическую папку в библиотеке стилей

Place the custom CSS files in the Themable folder in the Style library (not the Themable folder in the Master Page Gallery). Only CSS files that are stored in the Themable folder in the Style library are recognized by the theming engine. The Themable folder is created automatically for publishing sites. В противном случае можно создать папку Themable в правильном расположении (http:// SiteCollectionName/Style Library/ language/Themable/).

Имя языковой папки должно быть в 4-значном формате ll-cc , чтобы определить язык и язык и региональные параметры соответственно. Например, en-us или ar-sa. Для получения дополнительных сведений см идентификаторы языков и значения идентификаторов OptionState в Office 2013.

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

Регистрация CSS файла

Необходимо зарегистрировать CSS-файла в главную страницу, прежде чем CSS-файла можно использовать ядром темы. Если применить тему к сайту, направляет главную страницу в CSS-файл. Чтобы зарегистрировать CSS-файл, добавьте в элемент страницы master. Ниже показан формат .

Замените CSSFileLocation на расположение CSS-файла.

Ниже приведен пример .

 … " runat="server" /> 

[!Примечание] Маркер %$SPUrl не может использоваться для SharePoint Foundation 2013. Необходимо использовать URL-адрес, чтобы указать расположение CSS-файла.

См. также

  • Общие сведения о темах для SharePoint
  • Инструкции. Развертывание пользовательской темы в SharePoint
  • Обновление пользовательских тем и CSS для SharePoint
  • Инструкции. Создание файла предварительного просмотра эталонной страницы в SharePoint
  • Цветовые палитры и шрифты в SharePoint
  • Фирменная символика и конструкция возможности дизайнер SharePoint

Подключение шрифтов из папки.
CSS свойство font-face.

Есть разные способы подключения нестандартных шрифтов к сайту: скриптом, с помощью сервиса Google fonts или из локальной папки сайта. Для реализации последнего из способов используют CSS-правило @font-face .

Одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишут в font-weight и font-style.

Для современных (с 2017 года) браузеров нужен единственный формат: woff2.

@font-face < font-family: "OpenSans"; src: url("fonts/opensans.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; >@font-face < font-family: "OpenSans"; src: url("fonts/opensansbold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; >

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

@font-face < font-family: "OpenSans"; src: url("fonts/opensans.woff2") format("woff2"), url("fonts/opensans.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; >@font-face < font-family: "OpenSans"; src: url("fonts/opensansbold.woff2") format("woff2"), url("fonts/opensansbold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; >

Форматы ttf, eot, svg нужны только очень древним браузерам. Сейчас нет нужды их использовать.

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

Обязательно указывайте запасной веб-безопасный шрифт и семейство.

font-weight — соответствие слов и чисел

100 — Thin (Hairline)
200 — Extra Light (Ultra Light)
300 — Light
400 — Normal (Regular)
500 — Medium
600 — Semi Bold (Demi Bold)
700 — Bold
800 — Extra Bold (Ultra Bold)
900 — Black (Heavy)

Свойство unicode-range

CSS свойство unicode-range задает определенный диапазон символов для шрифта, определенного в @font-face и доступного для использования на странице. Если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.

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

Обратите внимание, что unicode-range не разбивает сам шрифтовой файл, он только показывает нужно ли загружать этот файл, есть ли соответствующие ему символы.

Зачем может понадобиться это свойство? Например, для мультиязычных сайтов. Чтобы не грузить пользователю шрифт, в котором есть символы для всех нужных языков, можно сделать шрифтовые файлы под каждый.

Для подключения кириллицы:

@font-face < font-display: swap; font-family: "Lato"; src: url("/fonts/lato-light/lato-light.cyrillic.woff2") format("woff2"), url("/fonts/lato-light/lato-light.cyrillic.woff") format("woff"); font-weight: 300; font-style: normal; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица >

Как это работает? Браузер анализирует ваш DOM и понимает, какие символы используются на сайте и, если есть совпадение, то шрифт закачивается. В данном примере, если на сайте есть кириллица, то lato-light.cyrillic.woff2 будет загружен и применится, а шрифт lato-light.latin.woff2 даже не закачается.

Или другой пример: вот таким способом можно применить другой шрифт только к цифровым символам:

@font-face < font-family: Georgia; src: url("fonts/fontin_sans_regular.eot"); src: url("fonts/fontin_sans_regular.eot?#iefix") format("embedded-opentype"), url("fonts/fontin_sans_regular.woff2") format("woff2"), url("fonts/fontin_sans_regular.woff") format("woff"), url("fonts/fontin_sans_regular.ttf") format("truetype"), url("fonts/fontin_sans_regular.svg#drevodel_regular") format("svg"); font-weight: normal; font-style: normal; >@font-face < font-family: "drevodel_regular"; src: url("fonts/drevodel_regular.eot"); src: url("fonts/drevodel_regular.eot?#iefix") format("embedded-opentype"), url("fonts/drevodel_regular.woff2") format("woff2"), url("fonts/drevodel_regular.woff") format("woff"), url("fonts/drevodel_regular.ttf") format("truetype"), url("fonts/drevodel_regular.svg#drevodel_regular") format("svg"); font-weight: normal; font-style: normal; unicode-range: U+30-39; >

Примечание: unicode-range не работает со шрифтами подключенными через Google Fonts, необходимо локальное подключение.

  • Предыдущий: Контент по центру, фон по ширине
  • Следующий: Псевдокласс :has

Оптимизируем шрифты и ускоряем сайт на 5-12%

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

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

Именно по завершении второго этапа пользователь приступает к изучению содержимого. Чем раньше этот этап завершится, тем лучше.

Шрифты в сжатом виде в формате woff2 могут занимать от 10% до 25% размера всех файлов страницы, загружаемых на первых двух этапах. Мы учитываем именно создаваемую нагрузку на сеть. Например, HTML, CSS, JavaScript код перед передачей по сети сжимается в 4-5 раза с помощью технологии gzip. То есть, 10%-25% это именно доля от объёма передаваемых данных.

Таким образом, сократив размеры шрифтов в 2 раза, можно добиться ускорения на 5%-12%, что очень весомо. Тем более что работа по оптимизации займёт не более часа. Как это сделать, мы расскажем в этой статье.

Способы ускорения

Оставляем только используемые символы

Первое, что стоит сделать — это удалить все неиспользуемые символы из файлов шрифтов. Файл шрифтов может содержать тысячи символов, но на странице используется полторы сотни.

Каждая языковая версия содержит только необходимый набор символов.

Например, для этой страницы достаточно всего 160 символов, в них входят:

  1. Буквы кириллицы в верхнем и нижнем регистре — 66 букв.
  2. 10 цифр.
  3. Буквы латинского алфавита в верхнем и нижнем регистре — 42 буквы. Они часто используются для указания названий товаров и брендов.
  4. 42 знака препинания, включая редко используемые. Вот они «»„““”‘’₽!@#%^&*()[]<>:;»|,.~…/<>‘?=+-–—_.

Всё остальное нужно удалить. Удобней всего это сделать в сервисе «Оптимизация шрифтов».

Пример оптимизации популярных шрифтов. Сравнивается скачанный с fonts.google.com файл в ttf формате с оптимизированными в сервисе woff2:

Сравнивается использования CDN сервиса google fonts с файлами, оптимизированными в сервисе на обычной странице с русским и английским текстом. Формат Woff2.

CDN сервис
-Roboto cyrillic regular
-Roboto latin regular

15.74 КБ
9.63 КБ
Всего 25.37 КБ

Комбинированный файл с кириллицей и латиницей вместе

Используйте самые современные форматы файлов

Тут всё просто: используйте woff2 формат, а не ttf, otf или woff. Чтобы браузер использовал именно его, в списке файлов шрифтов он должен идти на первом месте.

Вот в таком порядке нужно указывать разные форматы файлов шрифтов.

Сокращение глиф шрифтов

Если вы используйте шрифтовой файл с глиф иконками вроде Font Awesome, Typicons, Iconic и других, то рекомендуем заменить их на SVG версии и вставить в ваш CSS код. Перевести SVG код в CSS вам поможет этот сервис.

Это самый современный и эффективный способ хранения глиф иконок по следующим причинам:

  1. Разместив SVG иконки в файле CSS, вы экономите 1 запрос на подгрузку отдельного файла шрифтов.
  2. Иконки, сохранённые в CSS, могут содержать более 1 цвета. При использовании файла шрифта нужно идти на ухищрения для использования многоцветных иконок.
  3. Код SVG иконок сжимаются вместе с CSS кодом, что обеспечивает большую степень сжатия. Ведь чем крупнее файл, тем лучше работает gzip технология.

Если использование формата SVG иконок у вас вызывает сложности, то постарайтесь просто удалить все неиспользуемые иконки из ваших глиф файлов шрифтов. Сформировать такой файл вы можете в сервисах fontello.com и icomoon.io.

Просто выбираете нужные иконки и получаете свою версию только с ними.

Количество шрифтов

В идеале нужно использовать только 2 шрифта: обычный для текста и жирный для заголовков. Это полезно не только с точки зрения быстроты загрузки страницы, но и с точки зрения дизайна.

Используя минимальное количество шрифтов, вы получите:

  1. Однообразный текст, который проще воспринимать. Пользователи будут медленней уставать, читая текст.
  2. Переборщив с разнообразием, дизайн потеряет единообразие и консистентность. Человек может запутаться и ему сложней будет интуитивно понять структуру и каркас страницы.
Кэширование шрифтов в браузере

Обязательно укажите длительное время кеширования для файлов шрифтов. Это делается в настройках веб-сервера.

В nginx в настройках виртуального хоста укажите

location ~ \.(|woff2|woff|ttf|otf)$

В apache включите модули expires и deflate командой a2enmod expires;a2enmod deflate;service apache2 restart . Затем добавьте в конфигурационный файл виртуального хоста или .htaccess следующие строки:

 AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/woff AddOutputFilterByType DEFLATE font/woff2 AddOutputFilterByType DEFLATE font/opentype AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType font/woff .woff AddType font/woff2 .woff2 ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" 

Ваш веб сервер начнёт отправлять заголовок «Expires», который даёт команду браузеру хранить и не запрашивать повторно файлы 1 год. Это самый эффективный метод кеширования.

Предзагрузка файлов

Ссылки на файлы шрифтов содержится в CSS файлах. Получается, чтобы загрузить шрифт, нужно выполнить цепочку из 3 звеньев: загрузить HTML код страницы → загрузить CSS файл → загрузить файл шрифта.

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

Вы можете дать команду браузеру загрузить шрифты сразу, тем самым сократив цепочку до 2 звеньев: загрузка HTML кода страницы → загрузка файла шрифта.

Для этого прям в коде HTML страницы в секции укажите тег preload:

Так файл шрифтов загрузится быстрее и текст на странице покажется раньше на 50-120 миллисекунд.

Совместимость со старыми браузерами

Вам будет достаточно загрузить шрифты в 3 форматах: woff2, woff, truetype. Это обеспечивает поддержку в следующих браузерах: IE 9+, Edge 1+, Chrome 3.5+, Safari 3.1+, Firefox 3.5+, Opera 10.1+, Android 2.2+, Safari for iOS 4.2+. Это 98.39% пользователей всего интернета согласно сайту caniuse. Или все пользователи, чей браузер вышел после 2010 года.

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

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

Для этого в теге HTML кода страницы указать шрифты в аттрибуте style вот так:

Шрифты Tahoma и Verdana, как правило, установлены в операционной системе пользователя будь то Linux, Windows или MacOS. Поэтому они служат в качестве резервных. Если же их по какой-то причине нет, то будет использоваться шрифт семейства sans-serif заданный по умолчанию. Он называется страховочный.

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

Ошибки при ускорении шрифтов

Дескриптор font-display и подёргивания текста при загрузке

Шрифт задаётся командой font-family . Причём задаются минимум 4 шрифта. Например, код font-family: Roboto, Tahoma, Verdana, sans-serif означает следующее:

  1. Использовать шрифт Roboto, как основной, если он доступен. Файлы этого шрифта загружаются браузером отдельными запросами.
  2. Если их нет, то использовать резервные шрифты Tahoma или Verdana. Эти шрифты установлены по умолчанию в операционной системе. Поэтому могут служить временной заменой основному шрифту. То есть, — это резервные шрифты. Хорошая подборка резервных шрифтов доступна здесь.
  3. В случае если и резервные шрифты недоступны, использовать шрифт семейства sans-serif используемый в браузере по умолчанию. Он называется страховочный.

С помощью команды font-display вы можете указать стратегию загрузки шрифтов. Она может принимать следующие значения:

  1. Auto — поведение по умолчанию. Чаще всего используется режим «block» о котором ниже.
  2. Block — Ждём 3 секунды, пока не загрузится основной шрифт. Всё это время текст скрыт со страницы. Если основной шрифт не успел загрузиться, то используем резервный или страховочный. Как только основной шрифт всё же загрузится, переключаемся на него. То есть, в этом варианте текст может быть скрыт от пользователя на время до 3 секунд.
  3. Swap — используем резервный шрифт или страховочный сразу. Когда загрузится основной, используем его. Текст отображается на странице с первой секунды.
  4. Fallback — Ждём 0.1 секунды пока не загрузится основной шрифт. Всё это время текст скрыт со страницы. После этого используем резервный или страховочный. Если основной шрифт успел загрузиться за 3 секунды, то используем его. Если основной шрифт не успел загрузиться за 3 секунды, то продолжаем использовать резервный или страховочный.
  5. Optional — ждём 0.1 секунды пока не загрузится основной шрифт. Если он не загрузился, то используем резервный или страховочный. Даже если основной шрифт загрузится, то продолжаем использовать резервный или страховочный.

Мы же рекомендуем использовать режим auto, он же block по следующим причинам:

  1. Буквы в шрифтах имеют разный размер. Следовательно, размер блоков, в которых помещается текст, для разных шрифтов будет различаться. Переключая шрифт, браузер вынужден заново пересчитывать все размеры блоков и структуру страницы, что создаёт нагрузку на процессор. Это сказывается на быстродействии сайта и замедляет его загрузку. Это особенно актуально для мобильных телефонов.
  2. Режимы Swap и fallback позволяют пользователю увидеть текст как можно раньше. Но велика вероятность, что шрифты погрузятся после 0.1 секунды, и пользователь увидит резкое изменение типографики страницы. Это воспринимается как глюк или подёргивание и воспринимается негативно. Лучше избавить пользователя от необходимости наблюдать за резкими перестраиваниями страницы во время загрузки.
Использование CDN сервисов

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

Популярные сервисы Google Fonts или Adobe Fonts плохи по следующим причинам:

  1. Размеры файлов. Файлы шрифтов CDN сервисов плохо оптимизированы и содержат большое количество лишних символов например ±, ½, символы десятка валют, буквы с указанием ударения á и т. д.
  2. Лишние служебные операции. Для загрузки гугл шрифтов нужно подключиться к доменам fonts.gstatic.com и fonts.googleapis.com. Для этого нужно выполнить служебные операции: сделать запрос к CDN сервисам и отправить запрос на установку соединения. Это не окупается. При загрузке файлов шрифтов с CDN сервиса, они загружаются параллельно файлам с основного домена. То есть, ограничение в 6-8 потоков на один домен их не сдерживает. Но файл шрифта весит 20 килобайт, и их нужно 2-3 штуки. Даже с учётом ограничения в 6-8 потоков на загрузку файлов с одного домена, они загрузятся быстрее, чем браузер успеет отправить запросы к CDN сервисам и установить соединения с серверами fonts.gstatic.com и fonts.googleapis.com.
  3. Кросс-сайтовое кеширование — миф. Утверждается, что если пользователь загружал файлы шрифтов на другом сайте, то на вашем будут использоваться уже закешированные копии. Но Google Chrome, и Safari запрещают использование разными сайтами закешированных файлов со сторонних ресурсов в целях борьбы с отслеживанием.

Вывод

Для максимального ускорения загрузки шрифтов нужно выполнить всего несколько простых рекомендаций. Это займёт 2-3 часа. Но этими рекомендациями часто пренебрегают. Также рекомендую проверить ваш сайт сервисом Быстрый Апгрейд Сайта, который проверит соблюдение вышеописанных рекомендаций.

  • https://developer.chrome.com/blog/font-display/
  • https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/

Как прикрутить шрифт на сайт при помощи CSS

Иногда возникает необходимость использования на сайте нестандартных шрифтов. В данной статье будет рассказано о простом способе «прикрутить» шрифт на ваш сайт средствами CSS. Рассказывать буду на примере Franklin Gothic Medium Cond.
Решение подходит для: Opera, Firefox и IE.

  1. Для начала нам понадобится файл самого шрифта, в формате TTF (TrueType Font). Для этого можно воспользоваться этим сервисом. На нем вы найдете какой угодно шрифт и сразу проверите его в действии.
  2. После закачки необходимо .ttf сконвертировать в .eot (Embedded OpenType). Заходим сюда. Нашжав «Обзор» выбираем .ttf, после чего жмем кнопку «Convert TTF to EOF!». Сохраняем на диске.
  3. Создаем папку fonts в папке с нашим шаблоном и копируем туда Franklin.ttf и Franklin.eof. Кстати, файлы со шрифтами можете озаглавить как угодно.
  4. Далее необходимо добавить следующие строки в css файл нашего шаблона, причем выше стилей, к которым нужно будет привязать шрифт. Также хочу заметить порядок подключения файлов: сначала .eot, а потом .ttf.

[ user = font ] font [ /user ] -face <
font-family : «Franklin Gothic Medium Cond» ;
src : url ( «../fonts/Franklin.eot» ) ;
> [ user = font ] font [ /user ] -face <
font-family : «Franklin Gothic Medium Cond» ;
src : url ( «../fonts/Franklin.ttf» ) ;
>

.content p <
font-family : «Franklin Gothic Medium Cond» ;
>

Все готово! Жмем F5 и наслаждаемся новым шрифтом на нашем сайте из Оперы, Мозилы и IE.

Пример использования этого решения можете увидеть здесь. Левое меню и заголовок h2 выполнены с использованием нашего нестандартного шрифта.

  • Предлагаю решение
  • Блог
  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

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

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