Как подключить otf шрифт в css

webfanat вконтакте webfanat youtube

CSS шрифты

Я еще раз вас приветствую и поехали. CSS нам предлагает подключение таких шрифтов как Verdana, Arial, Tahoma, Times New Roman и т.п., но бывает и этого не всегда достаточно,и мы хотим найти и подключить какой нибудь экзотический шрифт.

И самое первое что мы можем сделать это подключить шрифт с какого нибудь сервиса через cdn, то есть используя специальную ссылку. Одним из таких сервисов является Google Fonts (https://fonts.google.com/) данный сервис предлагает нам большое количество разных шрифтов, их настройку и удобный интерфейс. Подробно останавливаться на этом сервисе я не буду, скажу что в ближайшем времени запишу видеообзор по данному сервису. Здесь нам понадобится только взять следующий код и вставить в файл CSS:

@import url('https://fonts.googleapis.com/css?family=Pacifico');

здесь я с google fonts выбрал шрифт Pacifico вставил его в начало css.

Теперь остается только назначить элементу шрифт:

 @import url('https://fonts.googleapis.com/css?family=Pacifico'); p Подключение шрифтов с помощью CSS

наш новый шрифт Pacifico успешно применился к элементу p, строчку font-family: ‘Pacifico’, cursive; мы также можем взять с сервиса.

C этим я думаю все понятно. Бывают ситуации когда мы ищем определенный шрифт, а на сервисах типа google fonts его нет или его необходимо купить чтобы пользоваться. Следовательно в таких ситуациях мы можем найти этот шрифт в интернете, причем для корректной поддержки в современных браузерах нам понадобятся пять форматов шрифта(eot, otf, svg, ttf, woff):

здесь у нас указаны четыре формата шрифта ProximaNova. Вы можете в принципе найти один из форматов шрифта и воспользуясь специальными сервисами типа(https://www.web-font-generator.com/) сгенирировать все недостающие форматы.

После того как у нас есть пять файлов шрифта с расширением (eot, otf, svg, ttf, woff) мы их должны подключить через CSS, делается это следующим образом:

@font-face < src: url('font/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), url('font/ProximaNova-Regular.woff') format('woff'), url('font/ProximaNova-Regular.ttf') format('truetype'), url('font/ProximaNova-Regular.svg#ProximaNova-Regular-Regular') format('svg'); font-family: 'ProximaNova'; font-weight: normal; font-style:normal; >

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

С помощью свойства font-family присвоили название к шрифту, то есть как мы будем к нему обращаться.

font-weight — жирность шрифта(bold,300,400 и т. д. )

font-style — стили шрифта(italic, normal)

В нашем случае свойства font-weight и font-style работать не будут, так как мы скачали шрифт с параметром regular, то есть с постоянными параметрами(font-weight:400 и font-style: normal), поэтому их смело можно убрать.

В итоге весь наш код будет выглядеть следующим образом:

 @font-face < src: url('font/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), url('font/ProximaNova-Regular.woff') format('woff'), url('font/ProximaNova-Regular.ttf') format('truetype'), url('font/ProximaNova-Regular.svg#ProximaNova-Regular-Regular') format('svg'); font-family: 'ProximaNova'; >p Подключение шрифтов с помощью CSS

как видите здесь ничего сложного нет.

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

Я желаю вам успехов и удачи! Пока!

Оцените статью:

Статьи

Ссылки html
база данных php
phpmailer php
Работа с ветками git
Полоса прокрутки css
CSS counter-increment
Javascript console.time
array filter js
css zoom

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm

Добавить приложение на рабочий стол

Подключение шрифтов в 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

Как подключить локальный .otf шрифт?

Использую скачанный шрифт Proxima Nova Regular. Пытаюсь его подключить таким способом:

@font-face < font-family: Proxima Nova Regular; src: url("../fonts/Proxima Nova Regular.otf") format("opentype"); >body

Этот код в layout.css.

Подозреваю, моя проблема в неверном пути к шрифту (потому что попробовал на другом простом проекте гле все файлы в одной папке — там работает). Вот моя структура — imgur.com/a/P8a2x

Перепробовал всевозможные варианты:
«../fonts/Proxima Nova Regular.otf»
«fonts/Proxima Nova Regular.otf»
«./fonts/Proxima Nova Regular.otf»

Ничего не работает.

апд: В порядке эксперимента, чтоб исключить ошибку с неверно указанным путем к файлу, я скопировал файл шрифта в разные места проекта (т.к. не уверен какой из файлов css делает первоначальный импорт). В ИТОГЕ НЕ РАБОТАЕТ НИГДЕ. ПОлучается, проблема НЕ в указанном пути к файлу!

Может проблема в Gulp?

Вопрос задан более трёх лет назад
25101 просмотр

1 комментарий

Оценить 1 комментарий

Подключение шрифта к html странице

Уже стало обычным то, что шрифты на сайте используются сторонние, т.к. стандартный набор шрифтов установленных в вашу операционную систему не подходит по каким-либо причинам (как правило – не устраивает вид и начертание). Поэтому возникает необходимость в использовании разнообразных шрифтов, разработанных другими компаниями.

Как же подключить шрифт к странице? Существует несколько способов:

1. Использование сервиса Google Fonts – https://fonts.google.com , где достаточно “наплюсовать” необходимые шрифты и затем с помощью вспомогательного окна в правой нижней части экрана провести дополнительную кастомизацию (выбрать жирность, курсив), и затем на вкладке Embed скопировать ссылку для вставки в тег head.

2. Подключение шрифта, размещая его на своем сайте:

На сегодняшний день для подключения шрифта достаточно иметь всего два файла в формате woff и woff2. Файлы в этих форматах занимают мало места, соответственно быстрее подгружаются к страничке, они поддерживаются всеми современными браузерами https://caniuse.com/#search=woff , https://caniuse.com/#search=woff2 (кроме Opera Mini) и включать файлы в форматах ttf, eot или svg – пережиток прошлого.
Таким образом, код для вставки в css файл выглядит так:

@font-face < font-family: 'Roboto'; src: local('Roboto'), url('../fonts/Roboto.woff2') format('woff2'), url('../fonts/Roboto.woff') format('woff'); font-weight: normal; font-style: normal; >

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

@font-face < font-family: 'museo_sans_cyrl'; src: url('../fonts/museosanscyrl-100.woff2') format('woff2'), url('../fonts/museosanscyrl-100.woff') format('woff'); font-weight: 100; font-style: normal; >@font-face < font-family: 'museo_sans_cyrl'; src: url('../fonts/museosanscyrl-300.woff2') format('woff2'), url('../fonts/museosanscyrl-300.woff') format('woff'); font-weight: 300; font-style: normal; >@font-face < font-family: 'museo_sans_cyrl'; src: url('../fonts/museosanscyrl-500.woff2') format('woff2'), url('../fonts/museosanscyrl-500.woff') format('woff'); font-weight: 500; font-style: normal; >

И затем в коде достаточно указывать необходимую жирность только с помощью font-weight.

Код устаревших конструкций можно уже не применять. Код приводится для ознакомления:

@font-face < font-family: 'Roboto'; src: local('Roboto'), url('../fonts/Roboto.eot'), url('../fonts/Roboto.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto.woff') format('woff'), url('../fonts/Roboto.ttf') format('truetype'), url('../fonts/Roboto.svg#Roboto') format('svg'); font-style: normal; font-weight: normal; >

Сервисы для конвертации шрифтов ttf, otf в woff и woff2:

https://www.fontsquirrel.com/
https://everythingfonts.com/font-face

Шрифты можно найти на сайтах:

http://fonts4web.ru/
http://ifont.ru/
https://google-webfonts-helper.herokuapp.com/fonts

Как подключить otf шрифт в css