Как установить сторонний шрифт в css
Перейти к содержимому

Как установить сторонний шрифт в css

  • автор:

Шрифты CSS

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

Достаточно богатую коллекцию шрифтов имеет сервис Google Fonts. Также с помощью него довольно просто подключить шрифт к себе на сайт.

Существует 2 основных способа, как подключить шрифт к сайту:

    С помощью HTML: Между тегами необходимо вставить строку следующего содержания:

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

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

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

Здесь шрифт Ubuntu применяется к тегу H1 (Название шрифта указывается в свойстве font family.) и цвет шрифта устанавливается с помощью тега color.

При использовании шрифтов от Google необходимо помнить, что отображение нужного шрифта может не поддерживаться в некоторых браузерах (кроме Google Chrome).

В конструкторе сайтов «Нубекс» имеется встроенная коллекция веб-шрифтов, которые можно выбирать непосредственно в настройках дизайна сайта.

Смотрите также:

  • Курсив CSS
  • Жирный текст CSS
  • Зачеркнутый текст HTML
  • Тень текста
  • Подчеркнутый текст HTML
  • Выравнивание текста в HTML
  • Цвет шрифта HTML

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

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

Сегодня мы поговорим о том, как подключить новый шрифт css к вашему сайту, что бы сделать его более оригинальным и привлекательным для посетителей.

Навигация по статье:

  • Как подключить шрифт CSS?
  • Где скачать шрифты для подключения к сайту через CSS?

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

Как подключить шрифт CSS?

  1. 1. Заходим на сайт-каталог шрифтов. Их легко можно найти в поиске. Ниже я приведу пример одного довольно удобного сайта, который я обычно использую.
  2. 2. Выбираем и скачиваем любой понравившийся нам. Чаще всего вам предоставляется для скачивания несколько файлов с различными вариантами исполнения (жирный, курсив, и т.д.), а так же с различными расширениями.

Для наших целей лучше всего подойдет файл с расширением .ttf, так как он поддерживаться всеми браузерами. Так же файл может быть в форматах .eot, .woff, .svg. Для поддержки данного шрифта в старых версиях Internet Explorer и некоторых других браузеров желательно подключить и форматы .eot и .woff

Как загрузить шрифт на сайт

@ font — face < font - family : 'Font Name' ; src : url ( 'fonts/ Font Name.ttf' ) format ( 'truetype' ) ; font - weight : normal ; font - style : normal ;

Обратите внимание! Вместо текста «Font Name» вам нужно вставить название скачанного вами файла. И обязательно обращайте внимание на формат, так как у вас он может быть другой или их может быть несколько.

Вот примеры подключения в CSS наиболее популярных форматов:
src : url ( ‘fonts/ Font Name.woff’ ) format ( ‘woff’ ) ;
src : url ( ‘fonts/ Font Name.eot’ ) format ( ‘eot’ ) ;
src : url ( ‘fonts/ Font Name.svg’ ) format ( ‘svg’ ) ;
font — family : ‘ JuraBook ‘ ;
. main — navigation ul li a < font - family : 'JuraBook' ; font - size : 18px ;

Где скачать шрифты для подключения к сайту через CSS?

На сегодняшний день есть огромное количество различный ресурсов для скачивания шрифтов, но лично мне больше всего нравится вот этот: FontStorage.com

кириллица красивые шрифты

Вот его основные преимущества по сравнению с другими ресурсами:

  • Большой выбор шрифтов для сайта
  • Большинство шрифтов представлены сразу в нескольких форматах
  • Есть наглядный предпросмотр с возможностью изменять размер и выбирать варианты текста для разных языков.

кириллица красивые шрифты

Подключить шрифт CSS

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

Так же, в одной из моих прошлых статей я рассказывала, как подключить к сайту Google Fonts. Если вам интересно, то вы можете ознакомиться со статьей по этой ссылке: Красивые шрифты Google Fonts для вашего сайта

Не забывайте делиться статьей в социальных сетях и оставлять свои комментарии. Это поможет мне понять, интересует ли вас данная тема и стоит ли делать подобные статьи.

А на сегодня у меня все. Желаю вам успехов в создании сайтов!

До встречи в следующих статьях!

С уважением Юлия Гусарь

Как установить сторонний шрифт в css

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

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

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

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

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

Оцените статью:
Статьи
  • Работа с выделением текста и курсором.
  • Трейты php
  • Область видимости php
  • Технология web workes в html5
  • Комбинаторный оператор сравнения в php7
  • произношение javascript
  • array filter js
  • Задержки php
  • URL javascript
Комментарии

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

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

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

Реклама

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

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

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

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

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