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

Как подключить локальный .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?

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

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

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

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

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
 

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

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

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

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

Статьи

• filter css
• CSS валидация
• php.ini php
• selection javascript
• Коллекции javascript
• css zoom
• Как установить go
• html copy

Комментарии

Внимание. Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

© 2017-2024 webfanat.com Все права защищены.

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

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

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

@font-face

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

Синтаксис

@font-face

Значения

Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта ( font-family , font-size , font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI) , где URI — относительный или абсолютный путь к файлу.

HTML5 CSS2.1 CSS3 IE Cr Op 11 Op 12 Sa Fx

     @font-face < font-family: Pompadur; /* Имя шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ >P 
Протяженность варьирует дорийский микрохроматический интервал, но если бы песен было раз в пять меньше, было бы лучше для всех.
  

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

Рис. 1. Собственный шрифт на странице

Браузеры

Браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).

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

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

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

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

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