Как подгрузить шрифт в css

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

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

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

Браузеры

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

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

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

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

В первую очередь необходимо загрузить шрифты и поместить их в отдельную директорию внутри своего проекта. Пусть в нашем примере это будет директория project/fonts/:

Далее заходим в наш CSS-файл style.css и прописываем конструкцию @font-face . Хорошим тоном является использование данной конструкции в самом начале CSS-файла. Конструкция @font-face принимает внутри себя 2 основных свойства, прописав которые мы и подключим необходимый нам шрифт:

font-family — имя подключаемого шрифта, по которому в дальнейшем можно будет обращаться к шрифту внутри нашего CSS-файла
src — путь к файлу со шрифтом

Подключим другое начертание выбранного нами шрифта:

 @font-face < font-family: "Roboto Bold"; src: url("../fonts/Roboto-Bold.ttf"); >

Теперь можно пользоваться данными шрифтами в CSS-файле

123. Как подключить сторонний шрифт в CSS

Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face . В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.

@font-face font-family: 'Open Sans'; 
src: local('Open Sans'), 
url('/font/open_sans.ttf') format('truetype');
>

Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p ). Часть кода local(‘Open Sans’) означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.

@font-face font-family: 'Open Sans'; 
src: url('/font/open_sans.ttf') format('truetype');
>

Третий пример более полный и более кроссбраузерный.

@font-face font-family: 'Open Sans'; 
src: url('open_sans.eot'); 
src: url('open_sans.ttf') format('truetype'), 
url('open_sans.woff') format('woff'); 
font-weight: normal; 
font-style: normal;
>

Другие способы подключения шрифтов

Способ первый (например, берем шрифт с сайта Google), код вставляется в :

Читать:

Как сохранить каталог lightroom

Способ второй (вставляется в CSS файл):

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

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

Для подключения шрифтов в CSS используется правило @font-face . В нём обязательно используется два свойства:

font-family — здесь указывается название шрифта, под которым он будет использоваться в проекте
src — путь к шрифту. Обычно, в качестве значения, используется функция url() . Внутри функции указывается путь

@font-face  font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); >

Если начертаний шрифта несколько, например Regular , Bold , Medium и так далее, то их можно подключить под одним именем, а потом менять через свойство font-weight . Главное, что каждое начертание указывается внутри своего правила @font-face и имя шрифта должно совпадать. Так же, внутри каждого @font-face указывается своё значение font-weight :

@font-face  font-weight: 400; /* Соответствует значению normal */ font-family: Roboto; src: url("../fonts/Roboto-Regular.ttf"); > @font-face  font-weight: 700; /* Соответствует значению bold */ font-family: Roboto; src: url("../fonts/Roboto-Bold.ttf"); > @font-face  font-weight: 300; font-family: Roboto; src: url("../fonts/Roboto-Light.ttf"); >