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

Как подключить шрифт в CSS, где найти и как установить

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

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

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

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

body {
  font-family: Open Sans Light, sans-serif;
  color: #333;
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
}

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

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

@font-face {
font-family: "Название шрифта"; 
src: url("../путь/к/шрифту.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal; 
}
 

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

@font-face {
font-family: "Open Sans Light"; 
src: url("../fonts/opensans.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal; 
}

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

body {
  font-family: Open Sans Light ;
  color: #333;
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
}

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

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

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

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

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

font-family css | задать шрифт css

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как изменить внешний вид первой буквы с помощью CSS. В данной статье я бы хотел рассказать, как задать шрифт в CSS. По умолчанию, при открытии вашей тестовой страницы, вы можете увидеть стандартный шрифт «Times New Roman». Если вам он не нравится, то вы его можете заменить. Делается это с помощью свойства font-family. Сразу хочу отметить, что браузер ищет шрифты в операционной системе пользователя, и если вы на своём сайте используете какой-нибудь экзотический шрифт, то скорее всего ваш сайт будет некорректно отображаться на большинстве компьютеров пользователей. Как же узнать наверняка, какой шрифт поддерживается большинством операционных систем? На данном сайте вы сможете найти список шрифтов, которые обязательно есть, как в операционной системе Windows, так и в Mac OS. Что удобно, здесь есть ещё начертание шрифтов, т.е. вы сразу можете посмотреть, как выглядит тот или иной шрифт. Поэтому можете смело брать любой из этих шрифтов и не бояться, что ваш сайт где-то криво отобразится. Давайте создадим простую html-страницу с двумя абзацами и изменим их шрифт:

<html>
<head>
	<meta charset="utf-8"/>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Первый абзац данного текста</p>
<p>Второй абзац данного текста</p>
</body>
</html>

В файле стилей style.css запишем следующие свойства для абзаца (тег p):

p {
font-family: Arial;
}

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

p {
font-family: Arial, "Palatino Linotype";
}

В данном случае браузер, если не найдет в системе пользователя шрифт «Arial», будет искать шрифт «Palatino Linotype». Также хочу обратить ваше внимание: если название шрифта состоит из нескольких слов, то его нужно указывать в кавычках.

На сайте, о котором я писал выше, рядом с каждом шрифтом есть названия, такие как sans-serif, serif, monospace. Это так называемые семейства шрифтов. Каждый шрифт относится к какому-то семейству. Давайте запишем такую конструкцию:

p {
font-family: Arial, "Palatino Linotype", sans-serif;
}

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

Домашнее задание: создайте тестовую html-страницу и отобразите текст на ней шрифтом «Comic Sans MS». Учтите момент, что если такого шрифта нет, то использовать семейство шрифтов cursive.

В данной статье вы узнали, как задать шрифты в CSS.

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

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

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

Если не указывать вид шрифта то браузер, по умолчанию, будет отображать весь текст стандартным шрифтом который называется Times New Roman. Этот шрифт есть в операционной системе Windows, есть в операционной системе Mac OS. Поэтому, если на странице не указан шрифт, то весь текст будет отображен шрифтом по умолчанию Times New Roman (этот шрифт установлен в любой системе) и он, все равно, нормально отобразится в любом браузере, и пользователь сможет его нормально прочитать.

Теперь мы рассмотрим как изменить такой шрифт на другой, который нам больше нравится или больше подходит по дизайну. Для этого переходим в файл со стилями и попробуем изменить шрифт конкретно для абзацев. Данное свойство для изменения шрифта называется font-family: ;, что означает «семейство шрифтов» и в нем указываем шрифт, который мы будем использовать вместо стандартного.

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

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

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

Например хотим чтобы вместо стандартного

HTML

 
Смена типа шрифта
 
Меняем шрифт с Times New Roman на Verdana

И задаем нужный нам вид шрифта в таблице стилей.

CSS

p{
  font-family:Verdana ; 
}  

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

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

CSS

p{
  font-family:Verdana, Tahoma ; 
}  

Теперь браузер будет действовать следующим образом. Сначала он начнет искать первый указанный шрифт Verdana, если он его нашел, то абзац отобразит именно им, если не нашел данный шрифт то берет следующий по порядку шрифт Tahoma и так далее. Мы можем указывать так сколь угодно много шрифтов и браузер будет перебирать все указанные шрифты пока не найдёт тот, который будет присутствовать в системе пользователя.

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

Для таких случаев есть еще более надежный вариант когда в конце указанного конкретного шрифта Вы указываете конкретную группу шрифтов например sans-serif — это группа содержащая текст без засечек и в нее входит Verdana и Tahoma. Вторая группа это serif отображаемые символы которой содержат засечки и одним из таких шрифтов является Times New Roman. И еще одна такая группа — это monospace которая содержит в себе все моноширинные шрифты. В таких шрифтах каждая буква занимает одинаковую ширину. Такие шрифты используются при создании кода. Это три самые большие группы шрифтов, и указывается такая группка следующим образом.

CSS

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

Такой вид записи для браузера будет говорить следующее: что если не найден первый шрифт Verdana то искать второй шрифт Tahoma и если и он не найден то взять любой шрифт из этой большой группы sans-serif. В данном случае это семейство шрифтов без засечек.

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

CSS

p{
  font-family:"Times New Roman" ,sans-serif; 
} 

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

Web Fonts CSS уроки для начинающих академия

Правило @font-грани CSS

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

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

Ваши «собственные» шрифты определяются в правиле CSS @font-face.

Различные форматы шрифтов

Шрифты TrueType (TTF)

TrueType является шрифтом стандарт, разработанный в конце 1980-х, Apple и Microsoft. TrueType является наиболее распространенным форматом шрифта для операционных систем Mac OS и Microsoft Windows.

Шрифты OpenType (OTF)

OpenType — это формат для масштабируемых компьютерных шрифтов. Он был построен на TrueType, и является зарегистрированным товарным знаком Microsoft. Шрифты OpenType обычно используются сегодня на основных компьютерных платформах.

Формат шрифта в Интернете (WOFF)

WOFF-это формат шрифта для использования на веб-страницах. Он был разработан в 2009, и в настоящее время является рекомендацией W3C. WOFF по существу OpenType или TrueType со сжатием и дополнительными метаданными. Целью является поддержка распространения шрифтов с сервера на клиент по сети с ограничениями пропускной способности.

Открытый формат шрифта в Интернете (WOFF 2,0)

Шрифт TrueType/OpenType, который обеспечивает лучшее сжатие, чем WOFF 1,0.

Шрифты/фигуры SVG

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

Встроенные шрифты OpenType (СРВ)

СРВ шрифты — это компактная форма шрифтов OpenType, разработанная корпорацией Майкрософт для использования в качестве встроенных шрифтов на веб-страницах.

Поддержка браузеров для форматов шрифтов

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

Как подключить шрифт к сайту при помощи @font-face в CSS. Блог на facefont

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

Если вы скачали шрифт на нашем сайте, в архиве со шрифтами вы найдете готовый CSS-код, который останется скопировать и поместить в CSS-документ подключенный к проекту.

Пошаговая установка

1. Выберите нужный шрифт и нажмите «скачать для сайта».

2. В корне своего сайта создайте папку fonts, и скопируйте в нее скачанные шрифты.

3. Откройте свой CSS-документ и скопируйте в него содержимое текстового файла из архива.

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

5. Готово. Скопируйте свойство с названием семейства и вставьте в селектор, для которого вы прописываете стили.

Что если я уже скачал шрифт в другом месте, и хочу его подключить?
 

В таком случае вам нужно найти в интернете конвертор шрифтов и преобразовать ваш ttf шрифт (или otf) в нужные форматы, а именно в eot, svg, woff и woff2. Это необходимо для того чтобы шрифт отображался и корректно работал во всех браузерах, а также на мобильных устройствах.

Затем вам нужно самостоятельно прописать правило @font-face, соблюдая его синтаксис.

Синтаксис @font-face

Синтаксис правила можно условно разделить на основные свойства и расширенные.

Основные:

• font-family – указывает название шрифта.
• src – указывает путь шрифта. Это может быть URL шрифта, расположенного на сервере вашего сайта, URL шрифты расположенного на чужом сервере (например, Google Fonts), или просто название шрифта расположенного на компьютере пользователя (Helvetica New Bold, Tahoma, Georgia и т.д.).

Расширенные:

• font-display – определяет как будет отображаться шрифт, в зависимости от того, был ли он загружен и готов ли к использованию.
• font-stretch – позволяет регулировать ширину текста.
• font-style – определяет начертание шрифта – обычное, курсивное или наклонное (последние два это не одно и то же).
• font-weight – устанавливает насыщенность шрифта, по шкале от 100 до 900 (100-сверхсветлое, 900-сверхжирное).
• font-variant — определяет как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера(капитель).
• font-feature-settings – позволяет управлять расширенными типографскими функциями в шрифтах OpenType.
• font-variations-settings – позволяет осуществлять низкоуровневый контроль над вариациями Open Type и TrueType шрифтов, указывая четырехбуквенные названия осей.
• unicode-range – указывает диапазон Unicode кодов(глифов), которые будут использоваться в шрифте.

Подключение шрифта к сайту с помощью Google Fonts

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

Скопированный код нужно разместить в теле тега head, на вашей странице html.

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

font-family — Веб-технологии для разработчиков

Свойство font-family CSS определяет приоритетный список из одного или нескольких имен семейств шрифтов и / или общих имён семейств для выбранного элемента.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Значения разделены запятыми, чтобы указать, что они являются альтернативными.Браузер выберет первый шрифт в списке, который установлен или может быть загружен с помощью правила @ font-face .

Часто удобно использовать сокращенное свойство font для одновременной установки font-size и других свойств, связанных со шрифтом.

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

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

Синтаксис

 / * Название семейства шрифтов и общее название семейства * /
семейство шрифтов: Gill Sans Extrabold, sans-serif;
семейство шрифтов: "Goudy Bookletter 1911", без засечек;

/ * Только родовое имя * /
семейство шрифтов: с засечками;
семейство шрифтов: без засечек;
семейство шрифтов: моноширинный;
семейство шрифтов: курсив;
семейство шрифтов: фантазия;
семейство шрифтов: system-ui;
семейство шрифтов: ui-serif;
семейство шрифтов: ui-sans-serif;
семейство шрифтов: ui-monospace;
семейство шрифтов: ui-rounded;
семейство шрифтов: смайлики;
семейство шрифтов: математика;
семейство шрифтов: fangsong;

/ * Глобальные значения * /
семейство шрифтов: наследование;
семейство шрифтов: начальный;
семейство шрифтов: отключено;
 

Свойство font-family перечисляет одно или несколько семейств шрифтов, разделенных запятыми.Каждое семейство шрифтов задается как значение или .

В приведенном ниже примере перечислены два семейства шрифтов, первое с и второе с :

: Gill Sans Extrabold, sans-serif; 

: Gill Sans Extrabold, sans-serif;
семейство шрифтов: "Goudy Bookletter 1911", без засечек; 

: Goudy Bookletter 1911, без засечек;
семейство шрифтов: красный / черный, без засечек;
семейство шрифтов: "Lucida" Grande, без засечек;
семейство шрифтов: Кхм !, без засечек;
семейство шрифтов: test @ foo, sans-serif;
семейство шрифтов: #POUND, без засечек;
семейство шрифтов: Гавайи 5-0, без засечек; 

 [<имя-семейства> | ] # 
, где 
   =  |  + 
  = serif | без засечек | курсив | фантазия | моноширинный  
 

.serif {
  семейство шрифтов: Times, Times New Roman, Georgia, serif;
}

.без засечек {
  семейство шрифтов: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  семейство шрифтов: Lucida Console, Courier, моноширинный;
}

.cursive {
  семейство шрифтов: курсив;
}

.фантазия {
  семейство шрифтов: фантазия;
}

.emoji {
  семейство шрифтов: смайлики;
}

.math {
  семейство шрифтов: математика;
}

.fangsong {
  семейство шрифтов: fangsong;
}
 

 

  Это пример шрифта с засечками.



  Это пример шрифта без засечек.


  Это пример моноширинного шрифта.



  Это пример курсивного шрифта.



  Это пример фантастического шрифта.



  Это пример математического шрифта.



  Это пример шрифта эмодзи.



  Это пример шрифта fangsong.