Загрузка своего шрифта


Содержание

«Как правильно установить любые шрифты на сайт и где их найти?»

Инструкция по поиску, оформлению и подключению шрифтов через CSS

Правильно подобранный шрифт – залог вовлеченности и высокой конверсии Вашего сайта

Роль шрифтов при создании сайта

При оформлении созданного сайта необходимо уделить должное внимание выбору шрифтов, поскольку люди посещают страницы с целью получить информацию именно через прочтение, поэтому нужно сделать этот процесс максимально комфортным. Разумным решением будет использовать два основных шрифта при оформлении сайта. Один – для заголовков, а другой – для основного текста. Таким образом, посетитель будет легко различать структуру контента, а сам сайт будет более целостным. Для заголовка, например, можно использовать шрифт Roboto Black, а для основного текста – Roboto Light или другие варианты. Важно знать, что шрифт, который вы установили на своем компьютере, не обязательно правильно отрисуется у других. Если такой же шрифт не установлен у читателя, то его браузер отобразит либо альтернативу вашему шрифту, либо значение по умолчанию.
Кстати, эта фраза для демонстрации всех кирилических шрифтов выбрана не случайно. Именно она содержит сразу весь русский алфавит и предоставляет возможным оценить отрисовку каждой буквы в контексте одного предложения.

Как установить сразу несколько шрифтов

Очередь шрифтов – указание в стилях сайта не только, например, «Roboto», но и ряд других, как вариант: «Roboto, Serif, Arial». В таком случае, браузер первым попытается использовать шрифт Roboto, если он не установлен на компьютере пользователя, то следующим будет Serif, за ним Arial, а затем шрифт, который система сама обозначила по умолчанию. Пример реализации, фрагмент из style.css моего сайта:

Как видно из кода, основным шрифтом является Open Sans Light, в случае возникновения с ним каких-либо проблем, браузер отобразит стандартный serif, который есть в каждой сборке Windows. Зачем это нужно, если система сама поставит шрифт по умолчанию? Затем, что стандартный serif визуально гораздо больше похож на мой кастомный Open Sans, и в целом, потери отображения контента будут не такими большими, как в случае с отрисовкой совершенно другим шрифтом.

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

Пример из таблицы стилей моего сайта:

После указания в style.css прямой ссылки на файл шрифта, остаётся лишь применить его, указав в том же файле стилей font-family для всего сайта или отдельного элемента. В качестве примера, применим ко всему тексту на сайте:

Где взять красивые шрифты для сайта?

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

AllFont — cервис, которым я пользуюсь лично. Это огромная библиотека шрифтов, в том числе, что немало важно, и кирилических. Сайт удобен тем, что Вам вовсе не обязательно скачивать шрифт для того, чтобы узнать как он будет выглядеть в работе — достаточно лишь ввести желаемую фразу в качестве примера, и Вы сразу получите представление о шрифте. Так же на странице каждого шрифта дополнительно есть изображение со всеми символами и буквами русского и английского алфавита, цифрами и самыми распространенными спецсимволами.

Желаю Вам удачи в оформлении

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

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

Шаг 0. Выбор места расположения шрифта.

Для установки нестандартного шрифта на сайт (отсутствующего в коллекции шрифтов рядового посетителя вашего сайта) мы можем:

  1. Использовать шрифты, расположенные на специальном хостинге шрифтов;
  2. Разместить необходимый шрифт на собственном сервере.

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

В первом случае мы можем воспользоваться множеством Интерактивных каталогов со встроенным хостингом шрифтов, существует как платные, так и бесплатные сервисы, такие как:

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

Шаг 1. Получить шрифт.

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

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

Шаг 2. Установка и использование шрифта.

Скопируйте файлы шрифта (файлы шрифтов имеют расширение: .ttf .eot .woff .svg ) в необходимую директорию на вашем сервере, например, ../fonts/ .

Для использования шрифта на вашем сайте необходимо в таблице стилей (файл .css ) или в теге на html странице указать следующий код:

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

После чего шрифт можно использовать при разметке страниц сайтов:

Шаг 2.1. Установка шрифта на локальном компьютере.

Если вы дополнительно хотите использовать шрифт на локальном компьютере, например, для работы в графическом иле текстовом редакторе, необходимо произвести его установку, сделать это можно несколькими способами: 1. переместив файл шрифта в папку со всеми шрифтами системы; 2. или открыв файл .ttf шрифта и нажав кнопку Установить.

Пример использования шрифта:

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

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

Добавление шрифта

Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке).

Один из способов изменить стиль документа — использовать для текста новый шрифт. Чтобы добавить необходимый шрифт в Word, загрузите и установите его в Windows, чтобы он стал доступен для всех приложений Office.

Шрифты предоставляются в виде файлов, и в Интернете можно загружать бесплатные шрифты, например дафонт. Вы также можете импортировать файлы шрифтов с компакт-диска, с DVD-диска или из сети Организации. Шрифты TrueType (Extension. TTF) и OpenType (ОТФ) работают нормально.

Примечание: Перед загрузкой шрифта убедитесь в надежности источника.

Добавление шрифта

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

Если файлы шрифта сжаты, распакуйте их. Для этого щелкните ZIP-папку правой кнопкой мыши и выберите команду Извлечь файлы. После этого вы увидите все доступные файлы шрифта TrueType или OpenType.

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

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

Новые шрифты отобразятся в списке шрифтов Word.

Установить шрифты и управлять ими можно также двумя другими способами.

Илон Маск рекомендует:  Предопределённые константы sockets

Все доступные на компьютере шрифты хранятся в папке C:\Windows\Fonts. Вы можете просто перетащить в нее распакованные файлы шрифта, и он будет автоматически установлен в Windows. Если вы хотите увидеть, как выглядит шрифт, откройте папку «Fonts», щелкните нужный файл правой кнопкой мыши и выберите команду Просмотр.

Еще один способ посмотреть установленные шрифты — в панели управления. В Windows 7 и Windows 10 откройте меню Панель управления > Шрифты. В Windows 8.1 выберите команды Панель управления > Оформление и персонализация > Шрифты.

При следующем запуске Word в списке шрифтов отобразятся новые варианты.

Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

Этот небольшой кусочек кода означает, что ко всем тегам

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


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

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

отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии.

Веб-шрифты

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

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

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

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

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

Формат файла шрифта Какие браузеры поддерживают
TTF Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOT Поддерживает только Internet Explorer
WOFF Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVG Chrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com. В строку поиска необходимо ввести название формата (например, ttf).

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

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

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

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

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

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

Шрифты Google Fonts

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

Скриншот: интерфейс сервиса Google Fonts

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

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

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

Шаг 2: выберите алфавит

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

Шаг 3: добавьте код на сайт

Далее Google предлагает подключить шрифт одним из нескольких способов: или стандартным, или через директиву @import , или с помощью JavaScript. Мы рассмотрим первые два варианта.

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

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

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

Скриншот: этапы настройки шрифта Google

Шаг 4: создайте стиль

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

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

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

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

Итоги

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

Как осуществить подключение нескольких шрифтов в css?

Попалась верстка макета к которому прилагается аж 12 файлов .ttf одного и того же шрифта, но с разным начертанием. Шрифт PFBeauSansPro и куча его вариантов Regular, Bold, Italic, italicBold и т.д.

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

Как будет правильно?

  • Вопрос задан более трёх лет назад
  • 50322 просмотра
Илон Маск рекомендует:  Что такое код icap_snooze

В font-weight можно использовать не ключевые слова, а цифры

100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black


При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1

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

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

Я хочу рассказать как избежать распространенных ошибок при подключении сторонних шрифтов и правильно использовать его в CSS.

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

Казалось бы, все просто. Заходишь на GoogleFonts, находишь любимый шрифт, копипастишь предоставляемый код и пользуешься на здоровье.

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

Как правильно подключить шрифт с GoogleFonts и использовать его в CSS?

Для этого нужно иметь базовые знания о типографике. Об это можно почитать в статье «Типографические термины, и зачем мне это знать?».

Рассмотрим подключения шрифта с GoogleFonts на примере самого популярного шрифта для блогов из семейства Roboto — Roboto.

Шаг 1. Определимся с необходимым набором свойств

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

Чтобы определиться с первым параметром, нужно выяснить какие типы шрифта будут использоваться на сайте(толщина шрифта). Чаще всего достаточно набора «regular, regular italic, meium, bold». Гораздо реже на сайтах используют «light» и совсем редко «thin». По причине недостаточной читабельности, так как это уж очень тонкие начертания.

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

Если вы не привыкли к обозначению толщины шрифта при помощи «thin, light, regular, meium, bold». Вот таблица соответствий толщины веб шрифтов (font-weight):

Значение — название

100 — Thin (Hairline) — Тонкий

200 — Extra Light (Ultra Light) — Дополнительный светлый (Сверх светлый)

300 — Light — Светлый

400 — Normal — Нормальный

500 — Medium — Средний

600 — Semi Bold (Demi Bold) — Полужирный

700 — Bold — Жирный

800 — Extra Bold (Ultra Bold) — Дополнительный жирный (Сверх жирный)

900 — Black (Heavy) — Черный (Густой)

Шаг 2. Выбираем необходимые языки

Выбираем Latin и если на сайте планируется использовать кириллицу (русские символы), то выбираем еще Cyrillic.

Шаг 3. Подключение шрифта на сайт

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

Два варианта подключения шрифта, выбор за вами:

2) Подключение в общий файл стилей. В начало файла css нужно добавить код:

Внимание! Шрифт должен быть подключен до его использования в коде.

Код подключения генерирует GoogleFonts, его можно скопировать на вкладке «Embed», выбрав тип подключения «STANDARD» или «@IMPORT».

Шаг 4. Использование стороннего шрифта в CSS

GoogleFonts предлагает нам использовать шрифт так:

font-family: ‘Roboto’, sans-serif;

Но что тут делает ‘sans-serif’?

Запасной шрифт.

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

Допустим, если CDN google приляжет на покой, то шрифт Roboto не загрузится и будет использован sans-serif. В таком случае получается что sans-serif — это запасной шрифт. В количестве запасных шрифтов никто не ограничивает.

Но при его выборе нужно учесть ряд факторов:

  1. Запасной шрифт должен быть «безопасным»;
  2. Запасной шрифт должен быть максимально похож на заменяемый шрифт.

Подробнее об этом Вы можете прочитать в статье «Как выбрать безопасный шрифт».

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

  • Все сторонние шрифты должны быть обрамлены в кавычки что бы четко ограничить место начала названия шрифта и его конец;
  • Шрифты должны быть разделены запятой;
  • Запасной шрифт должен иметь такие же начертания как и базовый(основной).

Что за файл в итоге мы получили от GoogleFonts?

В файле подключены файлы шрифтов для разной толщины и стиля. Рассмотрим подробнее один из блоков кода:

3. font-family: ‘Roboto’;

4. font-style: italic;

5. font-weight: 400;

6. src: local(‘Roboto Italic’), local(‘Roboto-Italic’), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format(‘woff2’);

7. unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

1 — Комментарий, описывающий какой шрифт будет подключен в правиле @font-face ниже. В данном случае это кириллица.


3 — Названия шрифта, для дальнейшего его использования в CSS.

4 — Стиль шрифта. italic — наклонный.

5 — Толщина шрифта. 400 — normal.

6 — Свойство local — название шрифта на локальном ПК. Если на ПК установлен шрифт «Roboto Italic» или «Roboto-Italic», то он будет использован. Если же шрифт не установлен — он будет загружен по «url».

7 — Диапазон кодов Unicode указывает на использование шрифта.

Итак. Что в итоге? Нельзя не назвать странным, что GoogleFonts предоставляет для загрузки только шрифты формата woff2. Игнорировав при этом такие форматы, как SVG, TTF, woff.

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

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

Грузим свой шрифт на сайт, используя CSS

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

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

Загрузить шрифт с сервера, а потом использовать можно примерно как то так (см. кусочек CSS):

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

Форматы шрифтов.

Существует великое множество разных форматов шрифтов и способов их взаимного преобразования. Все эти способы собраны в кучу в виде сервиса на одном сайте. Вы сможете загрузить свой шрифт на этот сайт, и выполнить преобразование в любой из описанных там форматов. Формат .EOT — нам нужен только для IE, который до 9й версии других форматов знать не хотел.

Ну, и дам ещё одну полезную ссылку на описание формата СSS от W3С в той его части, которая относится к шрифтам.

Все тоже самое только быстро, и не заморачиваясь.

Напоследок оставил самую нужную ссылку, чтобы наградить ею самых терпеливых. Сервис @font-face генератор на сайте fontsquirrel.com делает практически все за вас. И преобразование в нужные форматы, и создание кроссбраузерного CSS кода. Вам нужно загрузить ваши truetype шрифты, а генератор выдаст вам архив со всеми нужными форматами шрифтов, css файлом и примером использования всех этих файлов.

Если шрифто-белка не работает, есть аналогичный сервис — www.font2web.com.

Из личного опыта.

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

2. Иногда браузеры (у меня так себя вели Chrome и Opera), загрузив шрифт, устанавливают по умолчанию какое то (видимо максимальное в шрифте) значение свойства line-height, для загруженного шрифта. Так что не поленитесь и проверьте, где и что расползлось в вашей верстке. Придется эти места фиксить установкой line-height.

3. Если не знаете какой бы вариант выбрать в @font-faсе генераторе, выбирайте basic.

Данная запись опубликована в 28.08.2012 03:08 и размещена в На первой полосе. Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

Грузим шрифт на сайт, используя Google

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

Чудесный шрифт (awesome font CDN)

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

Как установить собственный шрифт на странице

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

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

1. Форматы шрифтов

Разные браузеры имеют свою поддержку форматов шрифтов. Например IE11 использует woff, а большинство других воспринимают otf (opentype). Следовательно, чтобы шрифты смотрелись хорошо во многих браузерах, нужно будет подключать несколько шрифтов одновременно.

Есть отличный сервис, который позволяет из одних форматов шрифта делать нужные, для примера возьмём шрифт MadelynFill формат otf (opentype) и сгенерируем шрифт для IE11 в формате woff.

Будем использовать генератор шрифтов — http://www.font2web.com/

2. Нажимаем «Выбрать файл» (1), выбираем шрифт otf

3. Кликаем на картинку Convert and Download (2), начнётся скачивание архива со всеми шрифтами.

На данный момент нам потребуются шрифты в формате woff и otf. Формат otf у нас уже есть, потребуется второй — woff.

Илон Маск рекомендует:  Пример 1 сканер

В архиве заходим в папку fonts и перемещаем шрифт формата woff в удобное место, например рядом с шрифтом otf.

2. Загрузка шрифта в Файловое Хранилище

Для того чтобы загрузить шрифт в Файловое Хранилище нужно сделать следующие шаги:

  1. Кликнуть на аватарку в меню;
  2. Перейти по ссылке «Файловое Хранилище»;
  3. Кликнуть на «Загрузить файлы», выбрать ваши шрифты и загрузить.

3. Создание CSS блока с шрифтом

Для того чтобы создать CSS блок, вам потребуется:

  1. Открыть конструктор с выбором блоков;
  2. Выбрать пунк «Вставка»;
  3. Кликнуть на CSS блок.

Результат — созданный блок.

Рекомендуем подключать стили всегда в шапке сайта (самым первым блоком), чтобы сами шрифты подгружались раньше.

3.1 Свойства для загрузки шрифта

  1. Открываем CSS блок
  2. Копируем и вставляем следующую конструкцию


font-family: ‘ Название шрифта‘;

В нашему случае название шрифта будет — MadelynFill, в итоге получим:

font-family: ‘MadelynFill‘;

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

3.2 Шаблон пути шрифта

src: url(‘../fileservice/file/download/h/ название-шрифта.otf/a/ идентификатор/sc/ номер‘) format(‘opentype’),

url(‘../fileservice/file/download/h/ название-шрифта.woff/a/ идентификатор/sc/номер‘) format(‘woff’);

Откуда брать эти выделенные значения? Как раз во время загрузки шрифта в Файловое Хранилище мы их получили.

  • Заходим в файловое хранилище
  • Находим наш шрифт, внимательно смотрим на формат, к примеру находим otf (1)
  • Нажимаем на его ID (2)
  • На скриншоте мы видим нужные значения (Название шрифта — (3), идентификатор (4), номер (5)

Нужно внимательно смотреть на цифры, потому что у другого шрифта они могут быть другими.

Подменяем значения, которые мы видим, такую же процедуру делаем и со вторым форматом woff.

Оптимизируем шрифты: 9 шагов к быстрому сайту

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

1. Правильное подключение

Собственные шрифты сайта, скорее всего, отсутствуют в браузере пользователя. Поэтому необходимо указать дополнительные к загрузке файлы, в которых будет содержаться техническая информация о начертании шрифтов (символы — глифы, особенности совместного начертания символов и строк и другие данные). Как это часто бывает, для каждого браузера нужен свой файл — Google Chrome понимает формат woff и woff2 (наиболее продвинутые), старый Android понимает только TTF, а IE — eot.

Дополнительно можно учесть, что в редких случаях шрифт может быть уже установлен на устройство пользователя: в этом случае можно использовать директиву local. Развернутая CSS инструкция, подключающая соответствующий шрифт на сайте, будет выглядеть примерно так (используем различные форматы для «попадания» в разные браузеры):

@font-face <
font-family: ‘Awesome Font’;
font-style: normal;
font-weight: 400;
src: local(‘Awesome Font’),
url(‘/fonts/awesome.woff2’) format(‘woff2’),
url(‘/fonts/awesome.woff’) format(‘woff’),
url(‘/fonts/awesome.ttf’) format(‘ttf’),
url(‘/fonts/awesome.eot’) format(‘eot’);
>

В этом случае все файлы шрифтов размещаются на хостинге. Для поддержки всех браузеров обычно используется набор файлов шрифтов для каждого начертания (гарнитуры). Его можно создать, например, через Font Squirrel : сервис автоматически предоставит CSS-код и набор файлов для размещения на сервере.

В качестве альтернативного варианта можно использовать сервис Google Fonts : вы вставляете вызов скрипта сервиса на сайт, а в зависимости от используемого браузера сервис уже отдает соответствующий CSS-код и файлы шрифта (уже с разбиением по языкам), поддерживая более 30 разных комбинаций.

2. Обратная совместимость шрифтов

Для максимального ускорения отображения текста вашего сайта на любом пользовательском устройстве вы должны сообщить браузеру, какой запасное семейство шрифтов можно использовать, если ваш собственный шрифт недоступен (не загрузился еще или загружается неподдерживаемый формат). Для этого в директиве font-face после названия вашего шрифта нужно указать наиболее подходящую системную альтернативу с обязательным окончанием serif (шрифт с засечками), sans-serif (без засечек) или monospace (равной ширины). Хотя обратная совместимость приводит к FOUT, но эта альтернативна лучше, чем невидимый на сайте текст (FOIT).

Но основную проблему с загрузкой собственных шрифтов это не решает: шрифты большие. Иногда слишком большие. И почти всегда они требуются, чтобы отобразить текст на странице (т.е. загрузка шрифта идет на стадии «белого экрана», максимально раздражая пользователей). Как это вылечить?

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

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

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

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

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

Google Fonts API позволяет загрузить только нужные варианты щрифта, а также загружает шрифты по наборам символов (позволяет браузерам не загружать полностью шрифт, если не все глифы требуются для отображения страницы). Среди дополнительных возможностей стоит отметить и параметр text=, который обрезает символы в загружаемом шрифте строго до заданных (если шрифт используется только для логотипа, это может быть очень ценно).

5. Уменьшение размера шрифтов

Если вы используете статическое сжатие, то достаточно подготовить архивы с файлами шрифтов и разместить их рядом с файлами шрифтов. При динамическом сжатии проверьте, что все основные форматы шрифтов — EOT, TTF, OTF, SVG, WOFF и WOFF2 — отдаются с хостинга сжатыми ( проверка сжатия ). Если это не так, то нужно добавить требуемые расширения или типы файлов в правила сжатия. Gzip ( или zopfli ) сжатие позволяет сократить размер шрифтов на 15-50%.

6. Удаление глифов

Для отображения текста на сайте обычно требуются далеко не все символы, включенные в шрифт по умолчанию. Часть из них относится к другому языку (например, к китайскому), часть — к специальным символам, которые вы не используете. Существует большое количество инструментов для удаления из шрифтов неиспользуемых глифов и утилиты по Windows / Mac. Наиболее популярные — это сервис Font Squirrel (в режиме Advanced), а также Subset.py и FontPrep . Также Google Fonts позволяет загружать только используемые наборы символов. Этот метод оптимизации позволяет сократить результирующий файл еще на 10-50%.

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

7. Кэширование шрифтов в браузере

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

Первое – это жесткое кэширование файлов (для обычных пользователей) и base64-представления (в localStorage, для мобильных пользователей). Прием работает только для вернувшихся на сайт пользователей, но для них позволяет существенно сократить время загрузки ( Детальная инструкция по использования localStorage).

8. Font Loading API

Второе – использование Font Loading API (поддерживается не всеми браузерами). При первичной загрузке страницы можно показать текст в установленном у пользователя шрифте, асинхронно загрузить нужный шрифт – и потратить несколько десятков миллисекунд (почти невидимое «подвисание» браузера) на перерисовку страницы по готовности шрифта. Существуют библиотеки для автоматизации процесса, одна из них представлена здесь .

9. Предзагрузка шрифтов

И, наконец, предварительная загрузка шрифтов (если они используются не с первой страницы у пользователей: например, в личном кабинете). Для этого подойдет техника prefetch , которая уже очень хорошо поддерживается браузерами: http://caniuse.com/#feat=link-rel-prefetch .

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

Загрузка своего шрифта для текста на сайте

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

Этап 1. Конвертация шрифтов

Для того, чтобы ваш шрифт корректно отображался во всех браузерах, необходимо иметь шрифт как минимум в двух форматах: ttf и eot. Обычно все русские шрифты имеют формат ttf. Для конвертации шрифта формата ttf в шрифт формата eot и не только имеется множество сервисов. Я пользусь этим: https://www.kirsle.net/wizards/ttf2eot.cgi . Выбираете tff шрифт с вашего компьютера, нажимаете «Convert TTF to EOT!», скачивайте шрифт в формате eot.

Этап 2. CSS

Первым делом нужно разместить шрифты (ttf и eot) в папке с сайтом (например: в папку fonts). Далее в файле стилей (либо между тегами ) нужно приписать следующее:

Теперь создаем правило, например для тега

HTML файл целиком:

Результат в браузере:

Важно!

Смотрите внимательно на расширение файлов шрифта, а точнее на его регистр. Расширение может быть как в верхнем регистре: TTF, EOT, так и в нижнем: ttf, eot. Укажите неправильно, шрифт не загрузится!

Альтернативный способ загрузки шрифта

Есть возможность не париться с конвертацией, добавлением шрифтов к файлам сайта, кроссбраузерностью благодаря сервису от Google: http://www.google.com/fonts/ .

2. В пункте «Script» выбираем «Cyrillic», ищем нужный шрифт

3. Добавляем шрифт в коллекцию, нажав «Add to Collection», затем на кнопку «Use», чтобы выбрать оформление шрифта

4. Выбираем стиль шрифта, кодировку, метод вставки, получаем правило css.

5. Выбрали метод «Standart» либо «Javascript», вставляем полученный код между тегами , получаем примерно следующее:

Выбрали метод «@import», вставляем полученный код в файл стилей css (либо между тегами ) , получаем примерно следующее:

Приписываем, например, тегу

Надеюсь, данная информация для вас будет полезна. Оба способа 100% рабочие. Экспериментируйте…

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL