Установка загруженных шрифтов
С помощью CSS-правила @font-face
можно добавлять сторонние шрифты, которые не установлены в операционной системе по умолчанию.
Ознакомиться со списком стандартных шрифтов можно - cssfontstack.com
Для добавления нестандартных шрифтов, используйте правило @font-face
, которое должно быть добавлено в самое начало CSS-файла.
В правиле @font-face
необходимо добавить ссылки на все доступные форматы шрифта.
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: 'MyAwesomeFont'; /* Придумайте название для шрифта */ src: url('fonts/MyAwesomeFont.eot'); /* IE9 */ src: url('fonts/MyAwesomeFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/MyAwesomeFont.woff2') format('woff2'), /* Самые современные браузеры */ url('fonts/MyAwesomeFont.woff') format('woff'), /* Современные браузеры */ url('fonts/MyAwesomeFont.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/MyAwesomeFont.svg#svgFontName') format('svg'); /* iOS */ } |
Теперь чтобы применить подключенный шрифт к текстовому элементу, в свойстве font-family
используйте имя, которое Вы указали в правиле @font-face
1 2 3 |
p { font-family: 'MyAwesomeFont', sans-serif; } |
Использование шрифтов со сторонних серверов
Помимо возможности хранения шрифтов на собственном сервере, их также можно подключать со сторонних сервисов. Одним из наиболее популярных сервисов шрифтов является - fonts.google.com.
Чтобы использовать какой-либо шрифт с сервиса fonts.google.com, в начале CSS-файла добавьте правило @import
и вставьте ссылку на CSS-файл, в котором уже прописаны все ссылки на шрифт, хранящийся на серверах Google.
1 |
@import url('https://fonts.googleapis.com/css?family=Fira+Sans'); |
Для применения подключенного шрифта также воспользуйтесь свойством font-family
, в котором нужно указать имя подключенного шрифта.
1 2 3 |
p { font-family: 'Fira Sans', sans-serif; } |
Вместо использования правила @import
, шрифты хранящиеся на сторонних серверах можно также подключить через тег <link>
в html файле.
1 |
<link href='//fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'> |