Подключить шрифт
Начиная с CSS 3 стало возможным добавлять нестандартные шрифты через ключевое слово @font-face .
@font-face < font-family: 'FontName'; src: local('FontName'), url('font.ttf'); /* путь к шрифту */ > /* применить подключенный шрифт */ p < font-family: 'FontName'; >
Стоит обратить внимание на свойство src . Параметр local() пытается подключить шрифт с компьютера посетителя сайта, иначе он загружает и отображает шрифт из параметра url() .
Если текст надо выделить жирным или курсивом, то надо подключить соответствующие шрифты для каждого стиля.
/* стандартный стиль шрифта */ @font-face < font-family: 'FontName'; src: url('font.ttf'); > /* для выделения жирным */ @font-face < font-family: 'FontName'; font-weight: 700; src: url('fontBOLD.ttf'); > /* для выделения курсивом */ @font-face < font-family: 'FontName'; font-style: italic; font-weight: 400; src: url('fontITALIC.ttf'); >
В коде выше загрузятся три разных шрифта (или один шрифт с тремя разными стилями).
Здесь стоит обратить внимание, что имена шрифтов везде одинаковы (свойство font-family ). Чтобы подключить шрифт с нужным стилем, надо добавить дополнительный параметр, который указан в определении шрифта.
/* задать стандартный шрифт */ body < font-family: 'FontName'; > /* подключить шрифт с жирным выделением */ strong < font-weight: 700; > /* подключить шрифт с курсивным выделением */ em < font-style: italic; font-weight: 400; >
В первом варианте у всех подключаемых шрифтов задано одинаковое имя. Нужный стиль загружается в зависимости от наличия CSS-свойства.
Также можно подключить нужный стиль шрифта, не указывая дополнительных CSS-свойств, а просто указав имя.
/* Подключение шрифтов */ @font-face < font-family: 'FontName'; src: url('font.ttf'); > @font-face < font-family: 'FontNameBold'; src: url('fontBOLD.ttf'); > @font-face < font-family: 'FontNameItalic'; src: url('fontITALIC.ttf'); > /* Применение шрифтов */ body < font-family: 'FontName' > strong < font-family: 'FontNameBold' > em < font-family: 'FontNameItalic' >
Данный вариант неудобен тем, что надо будет запоминать названия нескольких шрифтов, вместо того, чтобы использовать стандартное CSS-свойство, например, font-weight .
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
Как подключить шрифт к сайту html +css
Одна из первых задач, которая встает перед вебмастером при создании нового проекта — подбор и подключение необходимых шрифтов к сайту. Шрифт можно подключить как с помощью html и css, так и с помощью различных сервисов, например, GoogleFonts. Так же есть различные ресурсы, которые помогут быстро подобрать шрифты для вашего сайта:
- https://www.fonts-online.ru/ — хранилище шрифтов, доступных для скачивания.
- https://www.canva.com/font-combinations/ — удобный сервис для подбора шрифтовых пар.
- https://fonts.google.com/ — сервис от google с возможностью интеграции шрифтов на сайт через API.
Непосредственно подключить шрифты на сайт можно тремя способами:
1 Используя сервис GoogleFonts (https://fonts.google.com/)
Переходим на сервис, выбираем нужный шрифт, после чего откроется такое окно (рис.1):
Нажимаем на кнопку «select this style» (выделена красным), после чего справа появится всплывающее окно (рис. 2):
Если окно не появилось, то нажимаем на пиктограмму из трех квадратов и плюса (подчеркнута красным).
Выбираем вкладку Embed (подчеркнута красным) и копируем код для вставки на сайт (подсв. синим) (рис.3)
После того, как код скопирован, вставляем его в хедер вашего сайта между тегами .
Или переключаемся на вкладку @import (чуть правее) и копируем код из этого же окошка, но его вставляем в файл style.css вашего сайта.
После того, как шрифт подключен, в css — файле у нужного элемента прописывается следующее свойство ( на примере заголовка h1):
2 Через сервис https://www.fonts-online.ru/ или GoogleFonts скачиваем шрифт на сайт, далее загружаем его через файловый менеджер хостинга в папку fonts вашего сайта. Если у вас такой папки нет, то ее необходимо создать. После того, как папка создана и шрифт загружен, необходимо прописать путь к нему в хедере вашего сайта (на примере wordpress) между тегами .
В WordPress эта строчка вносится в файл header.php.
Некоторые браузеры не поддерживают определенные форматы шрифтов. Поэтому, если вы все сделали правильно, но шрифт не подключается, то попробуйте переконвертировать его в формат otf , woff или svg через любой онлайн — сервис для конвертации.
Проверить поддержку шрифтов браузером можно через этот сервис. Для этого необходимо ввести в поисковую строку формат шрифта (otf например).
Чтобы шрифт корректно отображали все браузеры, рекомендуется одновременно подключать несколько форматов (otf, svg, woff).
3 Этот способ более предпочтителен и отличается от предыдущего только тем, что шрифт подключается не через хедер, а через css. Для этого в файле style.css вашего сайта прописывается такой код:
@font-face <
font-family: ‘open sans’;
src: url(‘fonts/opensans.otf’);>
Следует обратить внимание, что этот код будет работать, если файл стилей и папка со шрифтом расположены на одном уровне. Если папка со шрифтом находится в другом месте, то тогда следует использовать такую конструкцию:
@font-face <
font-family: ‘open sans’;
src: url(‘../путь-до-папки/fonts/opensans.otf’);>
Вариант подключения шрифта через css самый практичный из всех вышеперечисленных, т. к. здесь же можно задать жирность шрифта, стиль и другие свойства. Например:
@font-face <
font-family: ‘open sans’;
src: url(‘fonts/opensans.otf’);
font-weight: 400; /*задаем жирность шрифта*/
font-style: normal; /*задаем стиль*/
>
Средняя оценка / 5. Количество оценок:
Оценок пока нет. Поставьте оценку первым!
Похожие записи :
Виджет яндекс отзывов на сайт
Если у вас есть компания/фирма/организация и ее профиль в Яндексе с.
Как сделать на сайте диаграмму или график
Диаграммы — довольно интересный и наглядный способ представления.
Как задать размер шрифта с помощью css свойства font-size
Чтобы задать размер шрифта на сайте с помощью css, необходимо у нужного.
Как выровнять текст по горизонтали и вертикали в блоке div с помощью css
Казалось бы, простая задача: выровнять текст по центру блока div. Присваиваем.
Как проверить сайт в разных браузерах
При окончании работы над сайтом всегда возникает необходимость проверить.
Как изменить или подключить шрифт в CSS
Большинство текстовых элементов по умолчанию имеют шрифт Times New Roman. В CSS есть возможность установить другие шрифты. Также в CSS можно подключить шрифт, который изначатьно не был предусмотрен в браузерах. В этой теме мы рассмотрим, как это сделать.
Семейства шрифтов
Шрифты подразделяются на семейства. Существуют такие семейства шрифтов:
serif — с засечками
sans-serif — без засечек
Безопасные шрифты
Существует достаточно много шрифтов. Сложность их использования заключается в том, что каждая операционная система имеет свой набор шрифтов. Кроме того, различные браузеры также отображают не все шрифты. Если для какого-то текстового элемента установлен шрифт, которого нет в операционной системе компьютера пользователя, то текст будет отображаться каким-то другим шрифтом. Шрифты, которые отображаются на всех компьютерах и во всех браузерах, называются безопасными. Считается, что абсолютно безопасных нет. Но всё же, существует ряд шрифтов, которые есть у абсолютного большинства пользователей. Далее приведены безопасные шрифты с указанием их семейства.
Times New Roman, serif
Trebuchet MS, sans-serif
Courier New, monospace
Comic Sans MS, cursive
Другие шрифты Вы можете найти, если наберёте в любом поисковике: стандартные шрифты.
Установка шрифта
Чтобы изменить или подключить шрифт в CSS используется свойство font-family . Значением этого свойства является название шрифта. Для примера создадим абзац и установим ему шрифт:
Текст
Если в названии шрифта больше одного слова, то оно пишется в кавычках. Пример:
Свойство font-family позволяет указать несколько шрифтов через запятую. Также можно указать семейтсво шрифтов. При этом, будет использоваться шрифт, указанный первым. Если такого нет, то используется следующий шрифт, и так далее. В основном, на реальных страницах так и делают. Это делается для того, чтобы быть уверенным, что страница будет отображаться так, как нужно.
Как подключить нестандартный шрифт в CSS
Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты. Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Их можно найти, через поисковик. Файл шрифта нужно скачать и присоединить к странице. Некоторые шрифты являются платными. Об этом должна быть информация на странице, с которой Вы скачиваете шрифт.
Сложность использования нестандартных шрифтов заключается в том, что каждый браузер поддерживает свой набор форматов. Поэтому, при использовании нестандартрого шрифта нужно проверять, как отображается страница в разных браузерах. Форматов шрифтов достаточно много. Наиболее универсальным является формат woff. Он должен работать в большинстве современных браузеров. Также распространены ttf и otf.
Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны быть два свойства: в свойстве font-family указывается название шрифта, под которым он будет использоваться на сайте. Название Вы выбираете сами. А в свойстве src указывается путь к файлу шрифта.
После этого, шрифт можно использовать для любого селектора. В свойстве font-family нужно указать название, которое Вы выбрали для шрифта.
Для примера я использую файл шрифта unineue.woff. Он располагается в той же папке, что и страница. Шрифт я назову Nfont.
7
8
9
10
11
12
13
14
15
16
@font-face < font-family: Nfont; src: url("unineue.woff"); >#text
Текст с нестандартным шрифтом
Чтобы шрифт работал в разных браузерах, можно использовать несколько файлов с разными форматами. В свойстве src путь к файлам пишется через запятую. Каждый браузер сам определяет, какой тип файла использовать. При этом желательно указывать форматы файлов, чтобы браузер мог правильно выбрать файл. CSS правило @font-face будет выглядеть так:
@font-face
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2023 © basecourse.ru Все права защищены
Подключение шрифта к странице: как нужно делать сейчас
Возможность подключать шрифты к странице — это здорово! Во времена IE8 это еще и было прекрасной возможностью использовать векторную графику для иконок (IE8 поддерживает подключаемые шрифты, но не поддерживает SVG). Появилось много способов сконвертировать шрифт, в том числе, он-лайн-конвертеры, лучший из которых — Font Squirrel. Одна беда: люди просто копируют получаемый из генератора код, ничуть о нём не задумываясь.
Как сейчас нужно подключать шрифты
@font-face
Как подключить несколько файлов одного шрифта и использовать одно название шрифта
Нередко, веб-шрифт — это несколько файлов: один файл — одно начертание (файл_1 — плотность 400, нормальный; файл_2 — плотность 400, италик, и так далее). А хочется везде при указании шрифта использовать одно его название, без упоминания в названии слов normal , italic , light и т.п., а указывать это в соответствующих CSS-свойствах.
Вариативные шрифты, для которых файл всего один, а вариантов начертания внутри много — отдельная тема, этот материал не о них.
Подключаем кучу файлов шрифта с указанием одного и того же имени, но разных font-weight и font-style :
@font-face < font-family: 'Web font'; /* название одно */ src: url('webfont8321.woff2'); /* разные файлы */ font-weight: 400; /* разная плотность */ font-style: normal; >@font-face < font-family: 'Web font'; /* название одно */ src: url('webfont___1.woff2'); /* разные файлы */ font-weight: 700; /* разная плотность */ font-style: normal; >И далее при указании селекторам шрифта и плотности, можно использовать одно имя, но разные плотности.
Как уже неактуально подключать шрифты
Для большинства проектов этот код неактуален, но может потребоваться для всякого старья с кроссбраузерностью IE8+ (привет, трилобиты!).
@font-face < font-family: 'Web font'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Новейшие браузеры */ url('webfont.woff') format('woff'), /* Новые браузеры и IE9+ */ url('webfont.ttf') format('truetype'), /* Старые Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Древние Safari, iOS, Android */ font-weight: normal; font-style: normal; >Если нужно взять шрифты с Google Fonts, но подключать их со своего хоста
google-webfonts-helper — превосходный сервис, который и шрифты даст скачать, и покажет код как их оптимальнее всего подключать (если забыть о FOUT).
Понравилась статья? Ставьте лайк, делитесь в соц. сетях или купите мне кофе.
© Николай Громов. Внутренняя Монголия, вечность, лето.