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

Different Font Formats

TrueType Fonts (TTF)


TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Где скачать шрифты для подключения к сайту через CSS?

На сегодняшний день есть огромное количество различный ресурсов для скачивания шрифтов, но лично мне больше всего нравится вот этот: FontStorage.com

Вот его основные преимущества по сравнению с другими ресурсами:

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

Наличие сортировки по типу шрифта, тематике и поддерживаемым языкам (алфавитам), что немаловажно!

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


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

А на сегодня у меня все. Желаю вам успехов в создании сайтов!

До встречи в следующих статьях!

С уважением Юлия Гусарь

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

Как подключить нестандартный 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.

Контролируем отображение шрифта

Свойство определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят.

Имя
Для
Значения auto, block, swap, fallback, optional
По умолчанию auto
‘auto’
Использует поведение браузера по умолчанию. Обычно это поведение ‘block’.
‘block’

Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

‘swap’

Устанавливает период блокировки в 0 секунд и бесконечный период замены.

‘fallback’

Устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды).

‘optional’

Устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды.

Syntax

@font-face {   font-properties }

Font descriptor Values Description
font-family name Required. Defines the name of the font.
src URL Required. Defines the URL(s) where the font should be downloaded from
font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded Optional. Defines how the font should be stretched. Default value is «normal»
font-style normal italic oblique Optional. Defines how the font should be styled. Default value is «normal»
font-weight normal bold 100 200 300 400 500 600 700 800 900 Optional. Defines the boldness of the font. Default value is «normal»
unicode-range unicode-range Optional. Defines the range of unicode characters the font supports. Default value is «U+0-10FFFF»

Категории шрифтов

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

  • Serif ( С засечками )
  • Sans Serif ( Без засечек )
  • Display ( Дисплей )
  • Handwriting ( Рукописный )
  • Monospace ( Моноширинные )

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

  • Thickness (Толщина)
  • Slant (Уклон)
  • Width (Ширина)

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

Ниже параметров есть список азбук, такие как Cyrillic (Кириллица), Latin (Латиница) и другие.

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

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

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

Настройка отображения результатов поиска

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

  • Word – только дно слово
  • Sentence – целое предложение
  • Paragraph – Целый параграф
  • Poster — Плакат

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

Google Fonts как подключить к сайту

Есть несколько способов подключения, рассмотрим каждый.

Подключение через fonts google api

Данный способ на мой взгляд самый оптимальный!. После того ка подобрали шрифт, идем на его страницу и выбираем начертания после чего сбоку увидите вкладку с 2 табами, нажимаете на Embed и там увидите 2 варианта подключения: через тег <link> и @import.

В первом случае добавляем тег <link> в html секцию head. Пример.

Затем подключаем шрифт для нужных блоков или сайта целиком в таблице стилей. Пример css кода для всего сайта.

Во втором случае сразу открываем файл стилей и прописываем в него подключение.


Пример CSS стилей:

Подключение нескольких шрифтов одновременно при помощи api

К примеру Вы хотите чтобы на сайте было 2 шрифта, один для всех текстов, а другой для всех заголовков, тогда щелкаем на вкладку «Browse fonts» выбираем еще один шрифт, затем его начертания и получаем уже объединенный код.

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

Качаем шрифты для WEB при помощи google webfonts helper и подключаем их к сайту.

Идем на сайт google-webfonts-helper.herokuapp.com/fonts/ вбиваем в окно поиска название шрифта. После чего выбираем нужный результат. Далее выбираем кодировку (Select charsets) и размеры (Select styles). Ниже выбираем поддержку браузеров: все (Best Support) или только современные (Modern Browsers) — лучше данный вариант. Копируем CSS код в таблицу стилей, скачиваем шрифт и затем заливаем его на сайт.

Пример CSS кода стандартного подключение скачанных шрифтов.

Если к примеру у вас 1 ttf шрифт (нет woff, eot, …), то подключение будет выглядеть так.

здесь display: swap; — это так сказать рекомендация гугла по оптимизации скорости.

Вот и все. Если что то не понятно можете заглянуть в руководство от гугла.

Сборка на основе Bootstrap 4 Как добавить сайт в поисковые системы. >

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity


С этим читают