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

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

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

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

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

@font-face

font-family

@font-face

создать указываемое имя шрифта
загрузить глифы для шрифта из указанного ею места

font-family

Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,

Формат EOT, который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.

Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически — это облегченная версия формата TTF или OTF.

Форматы OTF (Open Type Font) и TTF (True Type Font) — это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.

Формат SVG — это даже не формат шрифта, а формат графики, графического изображения. Особенностью этого формата является то, что графика в этом формате создается исключительно с помощью векторов, то есть — математических формул.

Благодаря этому изображения в таком формате масштабируются без потери качества — при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт — это фактически картинка в масштабируемом формате SVG.

Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов — “не умеешь кушать обычную пищу, так кушай хотя бы это!”.

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

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

Платные шрифты делятся на те, которые:

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:

The League of Movable Type (https://www.theleagueofmoveabletype.com/)
FontSquirrel (http://www.fontsquirrel.com/)
Google Fonts (https://www.google.com/fonts)
The Open Font Library (http://openfontlibrary.org/ru)
Fontex.org (http://fontex.org/)
Exljbris Font Foundry (http://www.exljbris.com/)

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

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

@font-face

@font-face

@font-face font-family: 'PTSans'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot#iefix') format('embedded-opentype'), url('PTSansRegular.woff') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); >

EOT — формат только для Internet Explorer 8 и ниже
WOFF — самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
TTF — сравнительно большой по размеру шрифт и достаточно устаревший
SVG — самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

@font-face

@font-face

h1 font-family: 'League Gothic', Arial, sans-serif; font-weight: normal; >

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем — резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

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

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

The Big List of Flat Icons & Icon Fonts
HTML for Icon Font Usage
Icon Fonts are Awesome
Шрифтовые иконки и сервис IcoMoon

Виды шрифтов

strong

strong em

На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).

oblique

@font-face

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

@font-face

font-weight

font-style

@font-face

@font-face font-family: 'PTSans'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot#iefix') format('embedded-opentype'), url('PTSansRegular.woff') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); font-weight: normal; font-style: normal; > @font-face font-family: 'PTSans'; src: url('PTSansItalic.eot'); src: url('PTSansItalic.eot#iefix') format('embedded-opentype'), url('PTSansItalic.woff') format('woff'), url('PTSansItalic.ttf') format('truetype'), url('PTSansItalic.svg') format('svg'); font-weight: normal; font-style: italic; > @font-face font-family: 'PTSans'; src: url('PTSansBold.eot'); src: url('PTSansBold.eot#iefix') format('embedded-opentype'), url('PTSansBold.woff') format('woff'), url('PTSansBold.ttf') format('truetype'), url('PTSansBold.svg') format('svg'); font-weight: bold; font-style: normal; > @font-face font-family: 'PTSans'; src: url('PTSansBoldItalic.eot'); src: url('PTSansBoldItalic.eot#iefix') format('embedded-opentype'), url('PTSansBoldItalic.woof') format('woff'), url('PTSansBoldItalic.ttf') format('truetype'), url('PTSansBoldItalic.svg') format('svg'); font-weight: bold; font-style: italic; >

@font-face

font-family: 'PTSans'

Как подключить шрифт в sass, чтобы он компилировался в css?

iiiBird

Я бы посоветовал использовать пакет для подключения, в разных форматах.
Компиляция происходит очень просто https://fontie.pixelsvsbytes.com/webfont-generator
Выбираете: Formats ставите галочку на TrueType Font.
После этого, загружаете любой из скачанных шрифтов (формат не важен) нажав на ссылку выше «Add your font files (or just drop them on the page)». Жмем «Generate & download your @font-face package» и скачиваем архив с генерированными шрифтами.

Следующий шаг: Открываем архив и копируем все шрифты(.ttf, .eot, .svg, .woff и .woff2) в директорию с проектом в папку fonts. В скачанном архиве, открываем файл *.css он там один и копируем стиль для шрифта в отдельный файл стилей шрифтов (как правило это файл _fonts.sass) подключенный к основному стилевому файлу к примеру так: . где fonts это имя вашего sass файла со шрифтами.
Пример комплекта подключения:

(копируем в файл _fonts.sass) структура может изменяться исходя из имени вашего шрифта.

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

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

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

Для примера, подключим шрифт от гугла.

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

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

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

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

Ссылка на это место страницы: #1

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.

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

Ссылка на это место страницы: #2

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

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

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

Ссылка на это место страницы: #3

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

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

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

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

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

Ссылка на это место страницы: #31

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

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

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

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

font-family: ‘MadelynFill‘;

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

Ссылка на это место страницы: #32

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.

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

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

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

font-family: ‘MadelynFill‘;

src: url(‘/fileservice/file/download/h/382043fad7a712894022f14504f30ea5.otf/a/13633/sc/498‘) format(‘opentype’),

url(‘/fileservice/file/download/h/4252a03bfcb1484fa6f5cf6b4f70c615.woff/a/13633/sc/232‘) format(‘woff’);

Данная конструкция должна будет быть у вас в блоке CSS, сохраняем.

Здорово, самую сложную часть мы завершили!

Ссылка на это место страницы: #4

4. Подключение шрифта определённому заголовку

Нужно будет в селекторе объявить шрифт — font-family: ‘MadelynFill’, sans-serif !Important;

Примерный результат

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

Ссылка на это место страницы: #5

5. Подключение шрифта на всю страницу

Общий селектор для подключения шрифта на всю страницу (все кнопки, текст, заголовки):

font-family: ‘MadelynFill’, sans-serif !important;

Примерный результат
Ссылка на это место страницы: #formaty-shriftov
Ссылка на это место страницы: #podklyunenie-na-stranice
Ссылка на это место страницы: #chastye-voprosy
Ссылка на это место страницы: #shrift-v-vidzhete
Ссылка на это место страницы: #shrift-v-akkaunte
Ссылка на это место страницы: #drugie-stati

Пт 26 Января 17:56

Евгения Черячукина удалить

Как будет выглядеть код, если у меня шрифт для заголовков сайта загружен в файловое хранилище, а шрифт для текста на гугл фонтс — Montserrat?
Его так же нужно загружать в файловое хранилище? СПасибо

Сохранить или отменить редактирование
Сб 18 Фев 13:00 Нравится • Ответить

Добрый день, Евгения!
Для наиболее точных рекомендаций напишите, пожалуйста, по данному вопросу в техническую поддержку https://getcourse.ru/contacts .
К обращению необходимо приложить ссылки на шрифты, а также пример страницы, на которой планируется их применение.

Сохранить или отменить редактирование
Сб 18 Фев 19:07 Нравится

Владислав Гарамов удалить

У меня жирность шрифта — отдельный файл. Мне надо как-то объединить все начертания в один woff или otf файл? Если да, то как это сделать?

И второй, не менее важный вопрос. Зачем вы постоянно заставляете обычных пользователей так глубоко погружаться в код? Геткурс должен ЭКОНОМИТЬ время, а не растягивать его! Так сложно сделать автоматический подгрузчик шрифтов из файла на пк, который автоматически расставлял и прописывал все CSS на сайте? Это огромное время занимает у ваших программистов?

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

Читать:

Как сканировать на mac