Как подключить шрифты в css font face
Перейти к содержимому

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

  • автор:

@font-face

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

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

@font-face

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

@font-face < font-family: myFont; src: url("Fun_Light.ttf"), url("Fun_Light.eot"); >p

Значения свойства

Свойство Значение Описание
font-family имя Определяет название шрифта (обязательный параметр).
src url Определяет путь к файлу шрифта, который будет использоваться (обязательный параметр).
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Указывает, как должен растягиваться шрифт (необязательный параметр). Значение по умолчанию — normal.
font-style normal
italic
oblique
Определяет стиль для шрифта (необязательный параметр). Значение по умолчанию — normal.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Определяет толщину шрифта (необязательный параметр). Значение по умолчанию — normal.
unicode-range unicode-диапазон Определяет диапазон поддерживаемых unicode символов (необязательный параметр). Значение по умолчанию — «U+0-10FFFF».

Пример

    Пример @font-face < font-family: myFont; src: url('terminator_real_nfi.ttf'); >div  
TERMINATOR

Результат данного примера в окне браузера:

font-face

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

@font-face в деталях

Типичный вид CSS правил, который генерирует сервис Typekit для внедрения шрифта выглядит так:

@font-face

Разберем детально что тут к чему и нужно ли оно.

font-family

Задаем имя внедряемого шрифта, которое потом можно будет указать нужным элементам. Например, заголовкам h1 зададим внедренный шрифт:

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

Вывод: правило обязательное.

Форматы шрифтов

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

Зачем так много форматов

В качестве ответа приведу таблицу поддержки форматов различными браузерами:

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

О порядке шрифтов

Т.к. грузится только первый шрифт, который браузер поддерживает, логичным будет указывать шрифты в порядке увеличения веса. Замечу сразу, что визуально все форматы выглядят одинаково. Хотя WOFF самый легкий, на первом месте стоит EOT для избежания бага в IE6-8.

Сокращаем запись

Если задача стоит в разработке под наиболее популярные браузеры, тогда в основном CSS можно оставить только WOFF:

@font-face

Для IE6-8 внедрить EOT в отдельном CSS подключенным через условные комментарии

@font-face

А для мобильных браузеров подключить отдельный CSS с TTF и SVG (для этого потребуется на стороне сервера определить, что это мобильное устройство и отдать нужный CSS).

Нужно ли указывать format?

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

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

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

@font-face

О декларации для IE

Во-первых их две. Первая строка (src: url(journal-webfont.eot);) — это для IE9. Вторая — IE6-8. (journal-webfont.eot?#iefix) такая хитрая запись нужна для фикса потенциально возможного бага в IE, который может коряво обработать src. IE9 хорошо понимает WOFF, поэтому если подключать отдельные стили для IE6-8, можно оставить только одну строку и при этом можно убрать фикс бага и format.

@font-face

Недостаток такой оптимизации

В IE6-8 появится дополнительный запрос к серверу: браузер будут пытаться загрузить шрифт из основного файла стилей с багом, о котором уже упоминал выше. Шрифт не подключится, после чего IE загрузит eot. Тут решать каждому, что в приоритете: то ли современные браузеры, то ли отсталые «ослы».

Заметка о WOFF

WOFF имеет преимущества перед остальными:

  1. это сжатый формат, легче любого другого почти в два раза;
  2. имеет относительную защиту — шрифт можно будет использовать только в Веб;
  3. содержит информацию о происхождении шрифта.

Зачем указывать font-style и font-weight

Чтобы явно определить стиль и жирность подключаемого шрифта. Если подключается шрифт всего с одним стилем и жирностью, можно эти правила упустить. Конечно если начертание шрифта совпадает со значениями по умолчанию: font-syle: normal, font-weight: normal.

@font-face

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

@font-face < font-family: JournalRegular; src: url(journal-webfont-regular.woff); >@font-face < font-family: JournalBold; src: url(journal-webfont-bold.woff); >@font-face < font-family: JournalItalic; src: url(journal-webfont-italic.woff); >h1 < font-family: JornalBold; >p < font-family: JournalRegular; >em

Это, конечно, будет работать. Но ошибка тут в том, что для разных начертаний используется разные имена шрифтов, а не соответствующие CSS правила. Это усложняет чтение кода, поддержку его, а та же может привести к неверному отображению элемента, если шрифт не загрузится (например, заголовок может остаться regular вместо требуемого bold).

Правильнее будет использовать шрифты следующим образом:

@font-face < font-family: Journal; src: url(journal-webfont-regular.woff); font-style: normal; font-weight: normal; >@font-face < font-family: JournalBold; src: url(journal-webfont-bold.woff); font-style: normal; font-weight: bold; >@font-face < font-family: JournalItalic; src: url(journal-webfont-italic.woff); font-style: italic; font-weight: normal; >h1 < font-family: Jornal; font-weight: bold; >p < font-family: Journal; font-style: normal; >em

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

Что можно еще добавить в @font-face

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

font-stretch

font-stretch задает ширину символов. Используется в @font-face по аналогии с font-syle и font-weight. По умолчанию имеет значение normal. Пока нет особого смысла использовать из-за слабой поддержки браузерами.

@font-face

local

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

@font-face

Использовать данную декларацию нужно очень осторожно, из-за проблем в некоторых браузерах.

unicode-range

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

@font-face

Поддержка браузерами на данный момент сильно хромает.

Материалы

  • W3C :: CSS Fonts Module Level 3
  • Веб-шрифты на распутье
  • Расширение возможностей шрифтов веб-сайта с использованием CSS3

По теме

  • @font-face. Нестандартный шрифт средствами CSS.
  • Cufon — нестандартный шрифт средствами JS
  • Сервисы: Google Web Fonts
  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

      @font-face

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

      Синтаксис

      @font-face
      Описание Пример
      Указывает тип значения.
      A && B Значения должны выводиться в указанном порядке. &&
      A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
      A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
      [ ] Группирует значения. [ crop || cross ]
      * Повторять ноль или больше раз. [,]*
      + Повторять один или больше раз. +
      ? Указанный тип, слово или группа не является обязательным. inset?
      Повторять не менее A, но не более B раз.
      # Повторять один или больше раз через запятую. #

      Значения

      Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url() , где — относительный или абсолютный путь к файлу.

      Пример

      Результат данного примера показан на рис. 1.

      Собственный шрифт на странице

      Рис. 1. Собственный шрифт на странице

      Примечание

      Браузер Internet Explorer до версии 9 поддерживает только шрифты формата EOT (Embedded OpenType).

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

      Спецификация

      Спецификация Статус
      WOFF File Format 2.0 Рабочий проект
      WOFF File Format 1.0 Рекомендация
      CSS Fonts Module Level 3 Возможная рекомендация

      Спецификация

      Каждая спецификация проходит несколько стадий одобрения.

      • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
      • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
      • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
      • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
      • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
      • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

      Браузеры

      5.5 9 12 4 10 12 3.1 3.5

      В таблице браузеров применяются следующие обозначения.

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

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

      См. также

      Практика

      Справочник CSS

      • !important
      • ::after
      • ::backdrop
      • ::before
      • ::first-letter
      • ::first-line
      • ::marker
      • ::placeholder
      • ::selection
      • :active
      • :blank
      • :buffering
      • :checked
      • :default
      • :dir
      • :disabled
      • :empty
      • :enabled
      • :first-child
      • :first-of-type
      • :focus
      • :focus-within
      • :fullscreen
      • :hover
      • :in-range
      • :indeterminate
      • :invalid
      • :is()
      • :lang()
      • :last-child
      • :last-of-type
      • :link
      • :muted
      • :not()
      • :nth-child()
      • :nth-last-child()
      • :nth-last-of-type()
      • :nth-of-type()
      • :only-child
      • :only-of-type
      • :optional
      • :out-of-range
      • :paused
      • :placeholder-shown
      • :playing
      • :read-only
      • :read-write
      • :required
      • :root
      • :seeking
      • :stalled
      • :target
      • :valid
      • :visited
      • :volume-locked
      • @charset
      • @document
      • @font-face
      • @import
      • @keyframes
      • @media
      • @page
      • @supports
      • @viewport
      • accent-color
      • 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
      • aspect-ratio
      • backdrop-filter
      • backface-visibility
      • background
      • background-attachment
      • background-blend-mode
      • background-clip
      • background-color
      • background-image
      • background-origin
      • background-position
      • background-position-x
      • background-position-y
      • background-repeat
      • background-size
      • block-size
      • border
      • border-block
      • border-block-color
      • border-block-end
      • border-block-end-color
      • border-block-end-style
      • border-block-end-width
      • border-block-start
      • border-block-start-color
      • border-block-start-style
      • border-block-start-width
      • border-block-style
      • border-block-width
      • border-bottom
      • border-bottom-color
      • border-bottom-left-radius
      • border-bottom-right-radius
      • border-bottom-style
      • border-bottom-width
      • border-collapse
      • border-color
      • border-end-end-radius
      • border-end-start-radius
      • border-image
      • 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-start-end-radius
      • border-start-start-radius
      • 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
      • caption-side
      • caret-color
      • clear
      • clip
      • 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-family
      • font-kerning
      • font-size
      • font-stretch
      • font-style
      • font-variant
      • font-weight
      • gap
      • height
      • hyphenate-character
      • hyphenate-limit-chars
      • hyphens
      • image-rendering
      • justify-content
      • left
      • letter-spacing
      • line-clamp
      • line-height
      • list-style
      • list-style-image
      • list-style-position
      • list-style-type
      • margin
      • margin-bottom
      • margin-left
      • margin-right
      • margin-top
      • marks
      • max-height
      • max-width
      • min-block-size
      • min-height
      • min-width
      • mix-blend-mode
      • object-fit
      • opacity
      • order
      • orphans
      • outline
      • outline-color
      • outline-offset
      • outline-style
      • outline-width
      • overflow
      • overflow-x
      • overflow-y
      • padding
      • padding-block
      • padding-block-end
      • padding-block-start
      • padding-bottom
      • padding-inline
      • padding-inline-end
      • padding-inline-start
      • padding-left
      • padding-right
      • padding-top
      • page-break-after
      • page-break-before
      • page-break-inside
      • perspective
      • perspective-origin
      • place-content
      • 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-skip-ink
      • text-decoration-style
      • text-emphasis
      • text-emphasis-color
      • text-emphasis-position
      • text-emphasis-style
      • text-fill-color
      • text-indent
      • text-orientation
      • text-overflow
      • text-shadow
      • text-stroke
      • text-stroke-color
      • text-stroke-width
      • 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
      • widows
      • width
      • word-break
      • word-spacing
      • word-wrap
      • writing-mode
      • z-index
      • zoom

      Roman52 / fonts.css

      Save Roman52/7aa8c4f60681ee74253312339527947c to your computer and use it in GitHub Desktop.

      Как правильно подключать шрифты fonts @font-face

      This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

      / / была проблема — не грузился шрифт на iphone — был кривой шрифт (скачал новый преобразовал) и заработало
      /*fw 300 fs normal */
      @font-face
      font-family : gotham;
      src : url ( ‘GothamLight.woff2’ ) format ( ‘woff2’ ) ,
      url ( ‘GothamLight.woff’ ) format ( ‘woff’ ) ,
      url ( ‘GothamLight.ttf’ ) format ( ‘truetype’ ) ,
      url ( ‘GothamLight.svg#gotham’ ) format ( ‘svg’ );
      font-style : normal;
      font-weight : 300 ;
      >
      /*fw 400 fs normal */
      @font-face
      font-family : gotham;
      src : url ( ‘GothamBook.woff2’ ) format ( ‘woff2’ ) ,
      url ( ‘GothamBook.woff’ ) format ( ‘woff’ ) ,
      url ( ‘GothamBook.ttf’ ) format ( ‘truetype’ ) ,
      url ( ‘GothamBook.svg#gotham’ ) format ( ‘svg’ );
      font-style : normal;
      font-weight : 400 ;
      >
      /*fw 500 fs normal */
      @font-face
      font-family : gotham;
      src : url ( ‘GothamMedium.woff2’ ) format ( ‘woff2’ ) ,
      url ( ‘GothamMedium.woff’ ) format ( ‘woff’ ) ,
      url ( ‘GothamMedium.ttf’ ) format ( ‘truetype’ ) ,
      url ( ‘GothamMedium.svg#gotham’ ) format ( ‘svg’ );
      font-style : normal;
      font-weight : 500 ;
      >
      /*fw 700 fs normal */
      @font-face
      font-family : gotham;
      src : url ( ‘GothamBold.woff2’ ) format ( ‘woff2’ ) ,
      url ( ‘GothamBold.woff’ ) format ( ‘woff’ ) ,
      url ( ‘GothamBold.ttf’ ) format ( ‘truetype’ ) ,
      url ( ‘GothamBold.svg#gotham’ ) format ( ‘svg’ );
      font-style : normal;
      font-weight : bold;
      >

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *