Подключение шрифтов из папки. css свойство font-face

Шрифты Google в WordPress

Наверняка многие из вас знают проект Google Fonts, позволяющий использовать на сайте нестандартную типографику. Давайте рассмотрим как добавить шрифт в вордпресс с помощью данного сервиса. Первым делом заходите на сайт fonts.google.com и выбираете нужный вариант. Далее кликаете по кнопке «Select this font» и внизу страницы появится «панелька» с выбранными фонтами.

При открытии окна увидите инструкцию по интеграции шрифтов Google с сайтом. Во вкладке «Customize» сможете выбрать поддержку кирилицы (если нужно), после чего базовый код вставки немного изменится. Добавляете его в файл шаблона header.php.

<link href="https://fonts.googleapis.com/css?family=Lobster&amp;subset=cyrillic" rel="stylesheet">

После этого для любого класса и элемента в CSS стилях допускается задание соответствующего семейства шрифта, например, для тех же заголовков:

h1, h2 {
 font-family 'Lobster', cursive;
}

В этом же окне есть ссылка для скачивания шрифта. Если хотите, можете загрузить TTF файл и с помощью описанного выше метода установить шрифт на WordPress сайт без зависимости от сторонних сервисов. Хотя время загрузки с Google Fonts достаточно высокое, и проекту Google вполне заслуживает доверия.

Установка шрифта

Чтобы изменить или подключить шрифт в CSS используется
свойство font-family. Значением этого свойства
является название шрифта. Для примера создадим абзац и установим ему шрифт:

Стиль:

+

p
  {
  font-family: Arial;
  }

HTML код:

<p>Текст</p>

Если в названии шрифта больше одного слова, то оно пишется в кавычках. Пример:

h1
  {
  font-family: "Times New Roman";
  }

Свойство font-family позволяет указать несколько шрифтов через запятую. Также
можно указать семейтсво шрифтов. При этом, будет использоваться шрифт, указанный первым. Если такого
нет, то используется следующий шрифт, и так далее. В основном, на реальных страницах так и делают.
Это делается для того, чтобы быть уверенным, что страница будет отображаться так, как
нужно.

Пример:

div
  {
  font-family: Tahoma, Verdana, sans-serif;
  }

Подключение Font Awesome на сайт в 3 шага

1. Заходим на официальный веб-сайт Font Awesome и регистрируемся — нажимаем «Start for Free»:

Мы получаем бесплатную лицензию на минимальный набор иконок, которые нам нужно будет скачать. Для тех, кому этого недостаточно могут купить лицензию PRO — откроются дополнительные коллекции с разными стилями, но для меня этого вполне достаточно.

2. Переходим на страницу Hosting Font Awesome Yourself  — появится техническое описание с инструкциями. Нажимаем кнопку «Download Font Awesome Free for the Web» и скачиваем архив с Awesome шрифтами на компьютер:

3. По FTP протоколу или SSH закачиваем архив в корневую (или любую другую) директорию вашего сайта. Распакуйте архив. Когда папка fontawesome появится на вашем сервере, переходим в редактирование шаблона сайта и в коде перед тегом </header> добавляем строчку:

Готово. Теперь библиотека Font Awesome будет подгружаться на сайт локально через указанный файл стилей.

Подключение собственного шрифта на сайт через Fontsquirrel

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

Для поддержки IE до версии 9.0 нам нужно подключить формат .eot.Для ранних версий Firefox и Chrome потребуется .woff и .svg.Без .svg также не обойтись, если нужна поддержка IOS до версии 4.0.

Заходим на сайт fontsquirrel.com и переходим в раздел Webfont Generator.

Нажимаем Add Font. Закачиваем свой собственный шрифт, выбираем кнопку Expert и после этого отмечаем нужные нам форматы:

Далее нам необходимо перейти к настройкам “subsetting” чтобы выбрать нужные символы из шрифта и, что в нашем случае обязательно – подключить кириллицу:

Далее жмем “Downoad Your Kit” и скачиваем получившиеся файлы к себе на компьютер.

Что примечательно, в скачанном архиве будет содержаться файл ourfont-demo.html, открыв который мы можем убедиться, что шрифт корректно отображается в браузере.

Далее, действуем практически по пункту два, только шрифтов на этот раз у нас может оказаться больше.

Закачиваем все шрифты из архива к себе на сайт.После чего заходим в файл style.css из архива и копируем код к себе в css на сайте:

CSS

Установка шрифтов

Шрифты представляют собой обычные файлы с определенным расширением. Для шрифтов, которые поддерживает Windows 10, расширение .ttf соответствует типу шрифта TrueType, а расширение .otf соответственно OpenType. Если у вас шрифт в каком то другом формате, в конце статьи вы сможете узнать как добавлять отличные от стандартных форматов шрифты.

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

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

Просмотр как выглядит шрифт в Windows 10

Рекомендуем прочитать по теме:

• Как посмотреть и удалить историю в браузерах
• Как запустить windows 10 в безопасном режиме
• Как узнать версию windows 10

Установить шрифт в вашей системе можно несколькими способами. Первый — это прямо из окна предварительного просмотра шрифта. Для этого запустите файл как делалось ранее для просмотра и если вас устраивает шрифт, нажмите на кнопку «Установить».

Установка шрифта из окна просмотра

Второй способ установки удобен в случае, если необходимо установить сразу несколько шрифтов в Windows 10. Чтобы установить этим способом, необходимо сначала разархивировать все файлы в одну из папок. Нажмите правой кнопкой мыши на шрифте, который требуется установить. В контекстном меню выберите «Установить» (установка шрифта предполагает наличие прав администратора, о чем говорит знак щита слева от надписи).

Установка одного шрифта из проводника

Чтобы установить данным способом сразу несколько шрифтов, выделите все файлы, которые вы хотите установить в системе. Нажмите правой кнопкой мыши и точно так же как и в предыдущем примере в контекстном меню выберите пункт «Установить».

Вообще установка шрифта — это простое копирование файла в папку, в которой система хранит установленные шрифты для работы.

Соответственно можно воспользоваться третьим способом установки — просто скопировать все файлы в данную папку. Расположена она: C:\ Windows\ Fonts.

Зайдя в эту папку, вы сможете не только установить, но и просмотреть как выглядят ранее установленные шрифты, удалить установленные, а так же скрыть шрифт для приложений. Скрытие предусматривает временное отключение, а не удаление из системы. Приложения просто перестанут его видеть. Система же будет продолжать видеть данный шрифт. Для удаления или скрытия шрифта выделите один или несколько необходимых шрифтов. В верхней части появиться список команд.

Подключение шрифта через файл

И так, у вас есть любимый шрифт, который вы используете в графических редакторах и хотели бы задействовать у себя на интернет ресурсе. Представляет он из себя обычный файл чаще всего с разрешением .ttf, но бывают еще форматы EOT, WOFF и SVG. Чтобы подключить его к сайту нужно задействовать правило @font-face в стилях CSS.

 
@font-face {
    font-family Lobster; /* Название */
    src url(fontslobster.ttf); /* Путь к файлу */
   }
 
p {
    font-family Lobster, cursive; /* Указываем для данного элемента подключенный нестандартный шрифт */
   }

Здесь нет ничего сложного. В правиле @font-face прописываем всего 2 вещи:

1. Название шрифта, которое впоследствии будем использовать при использовании правила font-family для элементов страницы.
2. путь к файлу со шрифтом, который нужно предварительно загрузить на сервер с помощью ftp клиента.

Далее указываем в правиле font-family для нужного элемента название нашего нестандартного шрифта. В примере это абзац — тег р.

Помните! Подключение любого файла к сайту, ведет к увеличению времени загрузки страниц. Проще говоря, сайт может начать тормозить. Чем больше размер подключаемого файла, тем ощутимее будут тормоза.

Шрифты Google Fonts

Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив , можно воспользоваться сервисом Google Fonts. Преимущество этого способа заключается в простоте способа и его надежности — достаточно получить на сервере Google одну строку ссылки и поместить ее в свой проект.

Примечательный момент использования шрифтов Google — это способ подключения полученных шрифтов. Первый способ — с помощью тега , второй в помощью директивы , третий с помощью скрипта JavaScript.

Первый способ прост, но имеет один недостаток — тег нужно будет подключать к каждой из разрабатываемых HTML-страниц проекта.

В тоже время, второй способ с помощью директивы более лаконичный — достаточно подключить ее в начало таблиц стилей, чтобы выбранные шрифты применялись ко всем HTML-страницам.

Третий способ с помощью JavaScript кроме сложности, никаких других преимуществ перед двумя другими не имеет.

В Google плотность шрифта обозначается не с помощью ключевых слов , или , а в числовой шкале — 100 до 900. Значение 400 соответствует , 700 — .

К примеру, код может выглядеть следующим образом. Зададим для элемента шрифт Gentium Book Basic нормальной плотности курсивного начертания:

На этом выжимка по веб-шрифтам заканчивается.

Подключаем шрифт через CSS

@font-face {
font-family: Roboto Condensed;
src: url(../fonts/Roboto.ttf);
}

Путь относительный и выглядит имено так 
url(../fonts/Roboto.ttf);

@font-face  — это сообщение браузеру, что будут подключаться сторонние шрифты на сайте.

Теперь чтобы применить стиль шрифта к всему тексту (параграфы, заголовки, ссылки, списки и т.д) мы сделаем одну маленькую хитрость. Ведь вы все знаете, что в CSS используется правило наследование, т.е родительский тег распространяет свое влияние на все дочерние элементы. Этим мы и воспользуемся и я объясню почему.

Во-первых, мы пропишем в css правило только один раз и оно будет распространяться автоматически на все другие элементы и классы от родителя к «дочкам».

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

Теперь как нам это сделать? Все просто. Мы знаем, что самый главный тег в веб структуре это 
<html>  и
<body> .

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

html,body{
width:100%;
margin:0;
padding:0;
font-family:’Roboto Condensed’, sans-serif;
}

Мы просто задали семейство шрифтов вот такой строчкой 
font-family’Roboto Condensed’,sans-serif;

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

Использование Google Fonts

Как вы уже знаете, Google предлагает огромное количество бесплатных сервисов на все случаи жизни. В нашем случае мы воспользуемся одним из них — Google Fonts. Это онлайн хранилище шрифтов. На данный момент их там уже более 600! Давайте посмотрим, как же им пользоваться.

Шай 1. Переходим на . В центральной области мы видим список шрифтов с образцами написания слов, а справа набор фильтров для удобного поиска.

Шаг 2. Выбрав понравившийся шрифт, нажимаем на кнопку «Add to Collection». В коллекцию можно добавить сразу несколько вариантов, но усердствовать слишком не стоит — берите только те, что действительно будете использовать.

Шаг 3. Сама коллекция представлена в нижнем поле страницы. Как только она окончательно сформировалась, нажмите на кнопку «Use».

Далее нам нужно сделать 4 действия.

Шаг 4.1. Далее галочками отмечаем разновидности каждого шрифта, которые хотим использоваться. Опять же, лишнее старайтесь не отмечать, ибо в правом верхнем углу есть информер Page Load, который показывает, на сколько замедлится скорость загрузки страницы после подключения всего этого добра. Разумеется, чем меньше, тем лучше.

Шаг 4.2. Во втором пункте выбираем поддерживаемые символы — латиница (Latin) и кириллица (Cyrillic). Есть еще специфические, но это уже по обстоятельствам.

Шаг 4.3. Подключение коллекции к интернет ресурсу.

Существует 3 способа подключения:

1. На вкладке Standard дается код, который нужно вставить в исходный код страницы между тегами head.
2. На вкладке @import дается код, который нужно вставить в файл со стилями css. Чаще всего это style.css. Вставляете в самое начало.
3. На вкладке Javascript есть код, который надо вставить в самый низ исходного кода страницы перед закрывающим тегом body (можно подключить его как и в первом варианте, в тег head, но скрипты принято размещать в самом низу исходного кода, чтобы не мешали загрузке страницы).

Лично я продпочита вариант №2, ибо он затрагивает только стили CSS.

Шаг 4.3. Теперь уже можно использовать только что подключенный вариант с помощью CSS правила font-family, как показано на приведенной картинке и на моем примере выше.

Лучший способ выразить благодарность автору — поделиться с друзьями!

Как подключить нестандартный ttf или otf шрифт в CSS?

В этом нет ничего сложного.
При помощи конструкции font-face в CSS мы можем указать путь к нестандартному ttf или otf файлу, проверить нет ли такого шрифта на компьютере и пользователя и указать имя шрифта, которое в дальнейшем сможем использовать в font-family. Делается это вот так:

	@font-face {
	    font-family: PT-Sans; /* имя шрифта для CSS правил */
	    src: local("PT-Sans"), /* проверяем наличие шрифта в ОС пользователя */
         url(fonts/PT-Sans.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
  }

Теперь шрифт будет доступен по заданному font-family в любом правиле css, а если такой шрифт не установлен на компьютере пользователя, то будет загружен с сервера наряду с картинками. Чтобы использовать его в своих правилах достаточно указать правильно имя:

	.my_customized_font{
		/*...*/
		font-family: PT-Sans;
		/*...*/
	}

После этого любой объект с классНеймом my_customized_font будет использовать нестандартный шрифт.
Но, как и всегда в случаях чего-то очень удобного и нестандартого, TrueType и OpenType шрифты не будут отображаться в броузерах от Microsoft.

Сложный способ подключения веб-шрифта

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

В тех местах, где применены теги или , браузер IE8 будет сам делать из шрифта PTSans начертания и , а не подключать уже готовые шрифты в этих начертаниях. Результат такой “самодеятельности” будет плачевным.

Выходом из положения будет применение различных имен шрифта в директиве . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже:

Обратите внимание на отсутствие правил и во всех четырех директивах. Такой код выглядит даже более понятным и логичным, нежели первый вариант

И вроде бы все хорошо, но задавайте теперь рассмотрим простой пример параграфа с тегами и , к которому следует применить шрифт PTSans.

Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам , , ссылке ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код?

Применять или не применять второй способ подключения веб-шрифтов — это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.

Подключения

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

Если у вас сайт построен на базе WordPress, подключить стили еще проще. Когда вам нужно заменить начертание заголовка, достаточно просто войти в панель администратора. Там поискать «Настройки темы». В разделе «Типография» будет целый список разнообразных вариантов. Нужно лишь выбрать и сохранить изменение.

Нестандартные шрифты средствами HTML и CSS в Internet Explorer.

К слову Internet Explorer начал поддерживать нестандартные шрифты в CSS еще с 4-й версии (сегодня актуально 8-мая, и доступна 9-тая версии!). Но при этом, как всегда, технология Microsoft отдаёт маразмом. Для того, чтобы подключить сторонний шрифт в HTML необходимо перевести его в специфический формат EOT, который сам по себе ничем не отличается от TTF или OTF, но разработан Microsoft специально для внедрения в HTML.
С точки зрения CSS подключить нестандартный шрифт в CSS так, чтобы он правильно отображался в Internet Explorer можно так:

	/*для Internet Explorer*/
	@font-face {
	    font-family: PT-Sans; /* имя шрифта для CSS правил */
	    src: local("PT-Sans"), /* проверяем наличие шрифта в ОС пользователя */
         url(fonts/PT-Sans.eot); /* если шрифт не установлен, тогда загружаем его по указанному пути */
  }

	/*для других броузеров*/
	@font-face {
	    font-family: PT-Sans; /* имя шрифта для CSS правил */
	    src: local("PT-Sans"), /* проверяем наличие шрифта в ОС пользователя */
         url(fonts/PT-Sans.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
  }

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

Пример: как вместо текста «Главная» в меню показывать иконку?

Текст пункта меню «Главная» иногда лишний и раздражает, многие вебмастера используют хук с иконками. Именно FontAwesome иконками, а не изображениями, которые увеличивают время загрузки веб-страницы.

Итак, для сначала нужно избавиться от текста «Главная» (или любого другого). Скрыть его можно конечно же с помощью CSS — идентификатора или класса (например, li class=»item1″), или если у вас CMS Joomla/WordPress — зайти в меню и, в зависимости от версий CMS: а) отключить вывод текста в опциях меню; б) просто вручную удалить текст пункта меню, а вместо него вставить код пробела — &#160.

Теперь используем CSS-псевдоэлемент before — он выведет иконку перед текстом.

Рабочий пример:

Результат:

Какие преимущества у Font Awesome?

• Идеально впишется в любой дизайн сайта, стиль шаблона;
• Иконки Font Awesome в векторном формате svg, что дает возможность менять их цвет и размеры без изменения качества;
• Легкость — не нагружает сайт, не замедляет загрузку веб-страниц (если использовать локально);
• Простота — подключаются в 3 шага. Все стили уже заданы в CSS-файле, которые можно изменить под свои требования. Пользователю нужно лишь скачать и загрузить архив на сайт, указать путь к css-стилям в хедере и вставить готовую строчку кода в исходном коде страницы;
• Иконки кроссплатформенные — их поддерживают все браузеры мира, они всегда корректно отображаются;
• Иконки можно использовать на любых CMS, фреймворках, веб-страницах;
• Иконки распространяются по бесплатной лицензии.

Ещё один способ подключить нестандартный шрифт в IE

Internet Explorer, как известно достаточно странные броузер. Достаточно просто взглянуть на то, как именно он отображает стандартные правила CSS 2.1. У ранних версий (а именно у 6-й) есть баг в парсинге URL. Если URL в правиле CSS написать «#», то весь текст, идущий за «#» будет восприниматься как продолжение ссылки, даже если там указаны кавычки и другие мелочи. Поэтому можно подключить сторонний шрифт одним правилом font-face и для IE и для других броузеров. Вот таким образом:

  @font-face {
	font-family: 'PTSans';
	src: url('css/fonts/ptsans.eot#') format('eot'), 
	     url('css/fonts/ptsans.ttf') format('truetype');
	}

Методы

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

Если CSS расположены отдельно, их подключают через тег <link>. Его нужно поместить внутрь <head> и </head>. В этой пометке нужно указать атрибут href, который покажет адрес к файлику с CSS.

Если команды снова-таки собраны отдельным файлом, подключаем их к веб-документу через указание @import. Его нужно писать между пометками <style> и </style>. Сразу после <style> помещаем директиву и в скобках, следом за url, указываем ссылку к файлу с CSS. В обоих случаях правила будут применимы ко всему документу.

Следующие два метода относятся к той ситуации, когда CSS размещен непосредственно в документе, который нужно «украсить». Таблица стилей в этом случае может находиться между пометками <style> и </style>. А четвертый способ предполагает размещение правил в основе одного из тегов, через атрибут style. Тогда правила будут затрагивать отдельный параметр, который находится в границах определенного текста.

Первые два метода ознаменовали появление внешних таблиц стилей, а вторые – внутренних.

Веб-шрифты

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

Каким же образом можно увеличить выбор шрифтов, чтобы сделать дизайн страницы индивидуальным, добавить оригинальности? На помощь приходят веб-шрифты. Читайте главу дальше и вы узнаете, как с ними работать.

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

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

Подключаем веб-шрифт с помощью @font-face

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

Далее нам необходимо дать команду браузеру загрузить шрифт . Записывается это с помощью директивы следующим образом:

@font-face {
	font-family: MyUniqueFont;
	src: url('fonts/MyUniqueFont.ttf');
}

Свойство в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

p {
	font-family: MyUniqueFont;
}

Во второй строке указывается путь к файлу шрифта. В нашем примере файл находится в папке . У вас URL-адрес может отличаться.

Инвентаризация шрифтов

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

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

Установка загруженных шрифтов

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

Ознакомиться со списком стандартных шрифтов можно — cssfontstack.com

Для добавления нестандартных шрифтов, используйте правило , которое должно быть добавлено в самое начало CSS-файла.

В правиле необходимо добавить ссылки на все доступные форматы шрифта.

@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 */
}

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

p {
font-family: ‘MyAwesomeFont’, sans-serif;
}

Установка дополнительных шрифтов

Если вы решили, что вам нужен новый шрифт, воспользуйтесь любым из нижеописанных способов

Неважно, какой из них выберете, результат будет один — список шрифтов в памяти компьютера пополнится

При помощи официального магазина

У Windows 10 имеется собственный магазин, содержащий в том числе и шрифты для системы.

1. Оказавшись в подпункте «Шрифты» блока «Персонализация» (как перейти к этому разделу, описано в пункте «Просмотр списка установленных шрифтов»), кликните по строке «Получить дополнительные шрифты».Нажимаем на строчку «Получить дополнительные шрифты»
2. Развернётся список из доступных шрифтов. Изучите его и выберите тот вариант, который вам больше всего понравится.Выбираем подходящий шрифт
3. Перейдя к одному из предложенных товаров, кликните по кнопке «Получить» (или «Купить», если шрифт платный) и дождитесь окончания установки. После того как процесс окончится, новый шрифт будет добавлен.Нажимаем кнопку «Купить»

При помощи файла

В официальном магазине Microsoft есть далеко не все существующие шрифты. Большинство из них размещено на сторонних сайтах в бесплатном или платном виде. Windows 10 умеет работать с двумя форматами, содержащими шрифты: ttf и otf.

1. Скачав с любого ресурса файл любого из двух форматов, кликните по нему правой клавишей мыши и выберите функцию «Установить».В контекстном меню выбираем функцию «Установить»
2. Начнётся автоматическая процедура установки шрифта. От вас больше не потребуется каких-либо действий.Дожидаемся конца установки

По окончании процесса вы получите новый шрифт в памяти компьютера.

При помощи специальной папки

В Windows есть специальная папка, содержащая все шрифты и позволяющая управлять ими. Перейти к ней можно по пути C:WindowsFonts. Для добавления шрифта перетащите или скопируйте файл формата ttf или otf в данную папку. После того как файл будет размещён, он автоматически добавится к списку остальных шрифтов.

При помощи сторонней программы

Для работы со шрифтами разработано большое количество сторонних программ. Некоторые из них умеют работать не только со стандартными форматами, но и с такими расширениями, которые не читает Windows.

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

FontMassive Light

Данное приложение умеет отображать список найденных шрифтов, а также каждый символ из набора. С помощью него можно удалять и устанавливать пакеты. Помимо стандартных форматов, FontMassive поддерживает расширение .pfm и .pfb.

Программа умеет сравнивать шрифты, искать похожие, конвертировать их в формат для Adobe Illustrator и не требует установки. Скачать её бесплатную версию для 32 и 64-битной системы можно с официального сайта разработчика.

Работать со шрифтами удобнее в FontMassive Light

FontForge

Это приложение подойдёт для тех, кто хочет не только установить чужие шрифты, но и создать свои. Используя встроенные средства программы, вы сможете нарисовать, сохранить и добавить в систему собственный шрифт. У FontForge есть огромное количество возможностей, позволяющих детально проработать каждый символ. Скачать утилиту можно с официального сайта разработчиков.

При помощи FontForge можно создать свой шрифт

Установка шрифтов PostScript Type 1

PostScript — это специальный язык программирования, разработанный компанией Adobe. Он часто используется в описании PDF-файлов, а также для хранения и описания шрифтов. PostScript Type 1 — всемирно принятый формат кодирования.

Для установки шрифтов данного формата потребуется специальная программа от компании Adobe — Adobe Type Manager. Скачав и открыв её, перейдите к вкладке Add Fonts, укажите путь до файла со шрифтом и используйте кнопку Add. Готово, новый шрифт добавлен в вашу библиотеку.

Указываем путь до шрифта и нажимаем кнопку Add

§Кроссдоменность

Шрифты — это статика, которую многие предпочитают хранить на каком-нибудь отдельном домене, где настроено кэширование, или на стороннем хранилище(в облаке). Однако при загрузке шрифта с другого домена возникают проблемы в Firefox и Internet Explorer. Все дело в политике безопасности этих браузеров, они не позволяют загружать шрифты со сторонних доменов и даже с поддоменов.

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

Еще одним решением проблемы является управление политикой безопасности на домене, с которого идет загрузка файла шрифта. Для сервера на Apache в .htaccess можно прописать Access-Control-Allow-Origin *. Такая запись позволит всем доменам загружать контент с отдающего сервера. Для IE и Firefox этого достаточно.

На этом мы закончим первую часть. В следующей части расскажем про плюсы и минусы подключения шрифтов через font-family и font-weight\font-style. В результате покажем итоговый font-face.