Webfonts.pro — здесь собраны лучшие шрифты

15 безопасных веб-шрифтов

1. Arial

Arial — это стандарт де-факто для большинства и один из наиболее широко используемых шрифтов без засечек (что означает отсутствие маленьких завитков в конце каждой буквы).

2. Times New Roman

Times New Roman используется для шрифтов с засечками, как Arial для шрифтов без засечек.

Он один из самых популярных на устройствах с Windows и представляет собой новую вариацию старого шрифта Times.

4. Courier New

Courier New, похожий на Times New Roman, является разновидностью еще одной старой классики. Он также считается моноширинным шрифтом (в отличие от шрифта с засечками и без засечек, который мы только что видели).

5. Courier

Courier — это старый моноширинный резервный серверный шрифт, доступный почти для всех устройств и операционных систем.

6. Verdana

Вердана — настоящий веб-шрифт, потому что: 1) простые линии без засечек и 2) у него очень большой размер. Буквы почти вытянутые, что позволяет легко читать онлайн.

7. Georgia

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

8.Palatino

Палатино восходит к эпохе Возрождения. Шутки в сторону! Это еще один крупный шрифт, который идеально подходит для Интернета, который традиционно используется для заголовков и рекламы в печатном стиле.

9. Гарамонд

Garamond — еще один шрифт старой школы, восходящий к стилям, используемым в Париже 16 века. Эта новая и улучшенная версия была представлена ​​и включена в состав большинства устройств Windows (и с тех пор была принята другими).

10. Bookman

Книжник (или Bookman Old Style) — еще один идеальный вариант заголовка, который сохраняет читаемость (или читаемость) даже при использовании небольшого размера.

11. Tahoma

Тахома относится к шрифту без засечек. Он широко использовался как альтернатива Arial и был шрифтом по умолчанию в некоторых более ранних версиях Windows, таких как Windows 2000, Windows XP и Windows Server 2003.

12. Trebuchet

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

13. Arial Black

Ариал Блэк — это более крупная, смелая и плохая версия вашего базового Arial. Как ни странно, он также имеет пропорции с Helvetica

Почему это важно? Чтобы они могли изначально использовать его для замены Helvetica и печати, не платя за лицензию

14. Impact

Impact — еще один смелый вариант заголовка, который отлично смотрится в нескольких коротких словах, но совершенно ужасен в предложении или длиннее.

15. Comic Sans MS

Comic Sans MS — забавная и причудливая альтернатива другим вариантам без засечек.

Это тоже довольно странно. Но с другой стороны, этот шрифт легко читать людям с дислексией.

Кто ваша аудитория и на каких языках она говорит?

«Услуга автоматического перевода повышает шансы, что кто-то увидит ваш контент на другом языке, почти до 100%», — говорит дизайнер Эбен Соркин, который в последние годы расширил свой шрифт Merriweather (показан выше) для поддержки большего количества европейских языков и кириллицы. «Наличие специфических глифов для их языков помогает угодить пользователям, — говорит Соркин. — Чем глобальнее ваша аудитория, тем более вероятно, что вы подумаете об этом»Если ваша основная задача — чтобы шрифт не менялся в максимальном количестве начертаний, рассмотрите возможность использования семейства шрифтов Noto (показано выше).AlegreyaMerriweatherNunitoRobotoQuattrocentoподдерживают кириллицуарабскихгреческихеврейскихбенгальское письмодевангаригуджаратитамильское письмотайского алфавитаGoogle Fonts

What is a “Web Safe Font”?

Simply put, this term is used to describe a font that is universally installed across all devices. Since they are stored locally, your website should load faster when you use a web-safe font.

This will ultimately affect SEO as page loading speed is one of the factors taken into account when ranking pages on the SERP.

That’s why we recommend using a web-safe font – to make sure your readers can view content easily and your website’s performance is not negatively impacted.

Keep in mind that there are alternatives to website safe fonts, which usually share the same characteristics as popular typefaces. For example, the alternatives for the Sans Serif font like Helvetica are Acumin and Univers.

But unlike their web-safe counterparts, alternative fonts are often not prepackaged on all OS. That being said, you may want to use one of them because it may seem that a popular font is overused.  Just remember that you might sacrifice the speed of your website in exchange.

Самые популярные шрифты для веб-страниц

Arial

Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif» или рубленых шрифтов (у которых нет засечек на кончиках букв). Его часто используют в Windows для замены других литер.

Helvetica

Helvetica — палочка-выручалочка для дизайнеров. Этот стандартный веб шрифт работает практически всегда (по крайней мере, в качестве подстраховки для других шрифтов).

Times New Roman

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

Times

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

Courier New

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

Courier

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

Verdana

Verdana может по праву считаться истинным веб-шрифтом (true web font) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.

Georgia

Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana. Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman, по сравнению с ним выглядит словно карлик.

Palatino

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

Garamond

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

Bookman

Bookman (или Bookman Old Style) — один из лучших стандартных шрифтов для заголовков. Его характерная черта — удобочитаемость даже при использовании маленького размера.

Trebuchet MS

Это шрифт средневековой тематики, изначально разработанный корпорацией Microsoft в середине девяностых годов. Он применялся в Windows XP. Сегодня с его помощью составляют основной текст.

Arial Black

Аналог стандартного шрифта для сайта Arial. Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica

А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию

Impact

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

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS 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

gap
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
row-gap

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

Configuration

The Web Font Loader configuration is defined by a global variable named , or passed directly to the method. It defines which fonts to load from each web font provider and gives you the option to specify callbacks for certain events. When using the asynchronous approach, you must define the global variable before the code that loads the Web Font Loader (as in the example above).

Events

Web Font Loader provides an event system that developers can hook into. It gives you notifications of the font loading sequence in both CSS and JavaScript.

• — This event is triggered when all fonts have been requested.
• — This event is triggered when the fonts have rendered.
• — This event is triggered when the browser does not support linked fonts or if none of the fonts could be loaded.
• — This event is triggered once for each font that’s loaded.
• — This event is triggered once for each font that renders.
• — This event is triggered if the font can’t be loaded.

CSS events are implemented as classes on the element. The following classes are set on the element:

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

The placeholder will be replaced by a sanitized version of the name of each font family. Spaces and underscores are removed from the name, and all characters are converted to lower case. For example, becomes . The placeholder is a Font Variation Description. Put simply, it’s a shorthand for describing the style and weight of a particular font. Here are a few examples:

/* n4 */
@font-face { font-style normal; font-weight normal; }

/* i7 */
@font-face { font-style italic; font-weight bold; }

Keep in mind that maps to and maps to . If no style/weight is specified, the default () will be used.

If fonts are loaded multiple times on a single page, the CSS classes continue to update to reflect the current state of the page. The global class is applied whenever fonts are being requested (even if other fonts are already active or inactive). The class is applied only if none of the fonts on the page have rendered. Otherwise, the class is applied (even if some fonts are inactive).

JavaScript events are implemented as callback functions on the configuration object.

WebFontConfig = {
  : function() {},
  active: function() {},
  inactive: function() {},
  fontloading: function(familyName, fvd) {},
  fontactive: function(familyName, fvd) {},
  fontinactive: function(familyName, fvd) {}
};

The , and callbacks are passed the family name and font variation description of the font that concerns the event.

It is possible to disable setting classes on the HTML element by setting the configuration parameter to (defaults to ).

WebFontConfig = {
  classes: false
};

You can also disable font events (callbacks) by setting the parameter to (defaults to ).

WebFontConfig = {
  events: false
};

If both events and classes are disabled, the Web Font Loader does not perform font watching and only acts as a way to insert @font-face rules in the document.

Timeouts

Since the Internet is not 100% reliable, it’s possible that a font will fail to load. The event will be triggered after 5 seconds if the font fails to render. If at least one font successfully renders, the event will be triggered, else the event will be triggered.

You can change the default timeout by using the option on the object.

WebFontConfig = {
  : {
    families: 'Droid Sans'
  },
  timeout: 2000 // Set the timeout to two seconds
};

The timeout value should be in milliseconds, and defaults to 3000 milliseconds (3 seconds) if not supplied.

Iframes

Usually, it’s easiest to include a copy of Web Font Loader in every window where fonts are needed, so that each window manages its own fonts. However, if you need to have a single window manage fonts for multiple same-origin child windows or iframes that are built up using JavaScript, Web Font Loader supports that as well. Just use the optional configuration option and give it a reference to the target window for loading:

WebFontConfig = {
  : {
    families: 'Droid Sans'
  },
  context: frames'my-child'
};

This is an advanced configuration option that isn’t needed for most use cases.

Web safe fonts #

If you have been doing web development long enough, you may remember the so-called . These fonts are known to be available on nearly all instances of the most used operating systems (namely Windows, macOS, the most common Linux distributions, Android, and iOS). In the early 2000s, Microsoft even spearheaded an initiative called TrueType core fonts for the Web that provided these fonts for free download with the objective that «whenever you visit a Web site that specifies them, you’ll see pages exactly as the site designer intended». Yes, this included sites set in Comic Sans MS. Here is a classic web safe font stack (with the ultimate fallback of whatever font) might look like this:

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

Найдите доступный вариативный шрифт

Данная технология достаточно нова, по этому перед тем как начать использовать вариативные шрифты, вам необходимо сначала найти их 🙂 Отличным местом для поиска является v-fonts.com. Тут вы сможете найти кучу различны вариативных шрифтов, поиграться с ними и скачать. Так же список шрифтов можно найти

Интегрируйте шрифты в ваши стили

Поддержка браузерами уже достаточно хороша, около 65%. Все последние браузеры в принципе поддерживают вариативные шрифты. Firefox поддерживает за флагом.

Интеграция вариативного шрифта в целом очень проста. Делаете вы это используя ‘@font-face’

Узнайте какие оси поддерживает шрифт

У каждого шрифта может быть свой набор поддерживаемых осей. Если вы не знаете возможностей своего шрифта, вы можете использовать замечательный тул от Roel Nieskens. Просто перетяните туда свой шрифт. Там же вы сможете скопировать сгенеренный CSS стиля для шрифта и использовать его в своем проекте.

Стилизация вариативного шрифта

• — вес, принимает только от 1 до 999.
• — растяжение, принимает процент. 100% — дефолт, 50% сжатый, 200% сильно растянутый. Название не очень очевидно, ведь по факту это ширина.
• — стиль, принимает наклон, от -90 до 90. Так же по-прежнему будет работать. К слову, большинство шрифтов как правило реализуют наклон до 8 градусов.
• — новое свойство, которое принимает или . По умолчанию браузеры будут ставить свойство в .

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

Так же вы можете изменять низкоуровневые свойства с помощью , например:

Того же самого эффекта вы можете достичь с помощью:

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

Полезные ссылки:

• Тут можно поиграться с вариативными шрифтами.
• Анимированна какаха, как демо возможностей кастомизации

П.C. Я достаточно давно не занимался переводом, думаю это дело практики. Если вы заметили какие-либо косяки или не точности, пишите мне в ЛС. Комментарии оставим, для комментирования

upd: Спасибо @gt8on, поправил пару ссылочек
upd: Спасибо MissisRol, поправил перевод 🙂

Как добавить шрифт на сайт

Идем на сайт www.google.com/fonts/, выбираем язык шрифта (русский шрифт отображается в меню слева, как Cyrillik). Для того чтобы скачать, нажмите на кнопку donwload.

Скопируйте содержащиеся в архиве шрифты в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Стандартное подключение скачанных шрифтов выглядит так

@font-face { font-family: 'Имя_шрифта_любое'; src: url('Имя_файла_шрифта.eot'); src: url('Имя_файла_шрифта.eot?#iefix') format('embedded-opentype'), url('Имя_файла_шрифта.woff') format('woff'), url('Имя_файла_шрифта.ttf') format('truetype'), url('Имя_файла_шрифта.svg#DSNoteRegular') format('svg'); font-weight: normal; font-style: normal;}

Пример подключения:

/* Код для подключения шрифта в /css/style.css */ @font-face { font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; }

Как подключить google шрифт к сайту.

Чтобы подключить шрифт к сайту, перейдите на вкладку EMBED, там вы увидите 2 способа подключения:

1. STANDARD — через html-тег link, его нужно разместить в head.

1. @IMPORT

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic');

Важно. В не зависимости от способа подключения, для определения этих семейств используйте следующие CSS правила:  font-family: ‘Roboto’, sans-serif; об этом будет еще ниже

С подключение шрифтов разобрались, осталось самое главное, их применение, чтобы они заработали необходимо прописать соответствующие css правила, например, чтобы применить подключенный шрифт ко всему сайту, нужно в css прописать вот такое правило

body {        font-family: 'Roboto', sans-serif;        font-size: 16px;      }

Если остались вопросы, вы можете заглянуть в руководство от гугла: developers.google.com/fonts/docs/getting_started

Как добавить шрифты Google в WordPress

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

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

1. Войдите в Панель управления WordPress

1. Перейдите в раздел Плагины > Добавить новый

1. Поиск “Easy Google Fonts”

1. Найдите плагин “Easy Google Fonts” и нажмите кнопку «Установить сейчас». Активировать его.

1. Перейдите в Настройки > Google шрифты и создайте “новый элемент управления шрифтами.”

1. Затем перейдите в раздел темы > Настройка > типографика, чтобы указать, какие шрифты используются для какого объекта.

И напоследок!

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

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

Кроме того, не забудьте поделиться статьёй со своими друзьями!

Какой шрифт вы используете в своем блоге, и выглядит ли он идеально? Оставьте свой комментарий ниже. Кроме того, не забудьте поделиться статьёй со своими друзьями!

http://web-revenue.ru/instrumenti/servisy/google-web-fonts

http://www.webdesguru.com/5-besplatnyh-shriftov-dlya-idealnyh-zagolovkov/

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

Веб-шрифты

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

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

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к 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

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

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

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

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

@font-face {
	font-family: MyUniqueFont;
	src: url('fonts/MyUniqueFont.ttf');
}

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

p {
	font-family: MyUniqueFont;
}

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

Краткое повторение семейств шрифтов

Как мы рассматривали в Фундаментальной стилизации текста и шрифта, шрифты применённые к вашему HTML могут контролироваться при помощи свойства . Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:

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

Embedding fonts using the @font-face rule

Fonts are hosted on the user’s server independently of external services. @font-face was a deprecated CSS2 rule that has been re-introduced in CSS3 specifications and is supported by almost all modern browsers. A web font is a customized font which is supported by different browsers and comes in formats such as TTF, WOFF, EOT and SVG.

   @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }