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

Как подключить сторонние шрифты в css

  • автор:

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

Для подключения шрифтов в CSS используется правило @font-face . В нём обязательно используется два свойства:

  1. font-family — здесь указывается название шрифта, под которым он будет использоваться в проекте
  2. src — путь к шрифту. Обычно, в качестве значения, используется функция url() . Внутри функции указывается путь
@font-face  font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); > 

Если начертаний шрифта несколько, например Regular , Bold , Medium и так далее, то их можно подключить под одним именем, а потом менять через свойство font-weight . Главное, что каждое начертание указывается внутри своего правила @font-face и имя шрифта должно совпадать. Так же, внутри каждого @font-face указывается своё значение font-weight :

@font-face  font-weight: 400; /* Соответствует значению normal */ font-family: Roboto; src: url("../fonts/Roboto-Regular.ttf"); > @font-face  font-weight: 700; /* Соответствует значению bold */ font-family: Roboto; src: url("../fonts/Roboto-Bold.ttf"); > @font-face  font-weight: 300; font-family: Roboto; src: url("../fonts/Roboto-Light.ttf"); > 

Как можно быстро подключить шрифты в css?

TosterModerator

Поясните, пожалуйста, куда «туда-сюда вы их вручную»?
Один раз закинули в папку, написали правила @font-face .

Для препроцессоров можно написать миксин (или нагуглить готовый и отредактировать под современные реалии).

AndreyDevWork

Андрей @AndreyDevWork Автор вопроса
Ankhena, это когда каждый шрифт и его жирность мы прописываем font face и пути

Ankhena

Андрей, ответ выше: используйте миксины
Решения вопроса 0
Ответы на вопрос 1

Так давай по полкам всё. Я конечно сомневаюсь, что подобного вопроса не было, но всё же
1. Локальное хранение шрифтов: Вы можете скачать шрифт в нужном формате (например, WOFF или TTF) и сохранить его в своем проекте. Затем в CSS вы можете использовать правило @font-face, чтобы подключить шрифт, указывая путь к файлу на вашем сервере. Например:

@font-face < font-family: 'MyFont'; src: url('/path/to/font.woff2') format('woff2'),//пример пути url('/path/to/font.woff') format('woff');//пример пути >

2.Есть вариант автоматизации этих процессов. Для этого используйте инструментов сборки и управления зависимостями(например GULP или WEBPACK)
3.Есть ещё возможность. Внедрение шрифтов через сервисы веб-шрифтов: Некоторые сервисы веб-шрифтов, такие как Google Fonts или Adobe Fonts, предоставляют быстрый и простой способ подключения шрифтов на вашем сайте, предоставляя вам готовый код CSS для вставки на ваш сайт.

Добавление собственных шрифтов

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

  1. Через : только для разрешенных поставщиков шрифтов.
  2. Через @font-face (без ограничений, разрешены все шрифты)

1. Использование

Используйте (обычно в теге head страницы), например так:

link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> 

Для загрузки шрифтов с помощью тегов link разрешены следующие источники:

  • Typography.com: https://cloud.typography.com
  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Typekit: https://use.typekit.net
  • Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com.

2. Использование @font-face

В качестве альтернативы вы можете использовать @font-face в своей таблице стилей AMP:

style amp-custom> @font-face  font-family: "Bitstream Vera Serif Bold"; src: url("https://somedomain.org/VeraSeBd.ttf"); > body  font-family: "Bitstream Vera Serif Bold", serif; > style> 

ПРИМЕЧАНИЕ. Шрифты, добавленные посредством @font-face , должны загружаться по схеме HTTP или HTTPS.

Written by @pbakaus

Конечно же, этот сайт сделан с помощью AMP!

Подписывайтесь на нас
Обзор
Документы
Сообщество
OpenJS Foundation
События
Брендовые материалы AMP
  • Terms of Use
  • Политика конфиденциальности
  • Cookie Policy

© OpenJS Foundation and AMP Project contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The services available at cdn.ampproject.org are provided by Google and the respective privacy policy applies.

We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.

Нестандартные шрифты на сайте с помощью CSS

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

Итак, начнем, конечно, со спецификации CSS. Она сама здесь. Нам нужно только «Font Descriptions and @font-face»:

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

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

  1. Те, которые обеспечивают связь между использованием CSS шрифта и описанием шрифта (у них есть те же самые названия, как соответствующие свойства шрифта CSS).
  2. Ссылки на местоположение данного шрифта.
  3. те, которые далее характеризуют шрифт, чтобы обеспечить связь между описанием шрифта и данными шрифта.

Все описания шрифта определены через @font-face в правиле. Общая форма:

@font-face

Разберем пример из спецификации.

   Font test @font-face < font-family: "Robson Celtic"; src: url("/fonts/rob-celt") >h1  

This heading is displayed using Robson Celtic

  • font-family: «Robson Celtic» — полное название шрифта. Его можно узнать с помощью программ по работе со шрифтами. И браузер конечно надо научить его искать. Для этого прописываем название шрифта в данной спецификации.
  • src: url(«/fonts/rob-celt») — путь к шрифту относительно CSS стиля. Не абсолютный.

К сожалению это решение не кроссбразуерное, правильно использовать нестандартные шрифты на сайте будет так:

@font-face

Использование Google Fonts

Есть еще интересное решение, которое предстовляет компания Google — Google Font Api. Тут все проще, позволяет снизить нагрузку на сервер, грузя шрифты с серверов Google. Выбираете нужный шрифт, конечно если он бесплатен и есть на сервере. Чаще всего в проектах испольузем шрифты серии PT Sans. Выбираем шрифт, нажимаем кнопку Quick use и получаем следующий код.

PT+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Но есть и другие варианты подключения нестандартных шрифтов на сайте, например через @import:

@import url(http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic);

И вариант ассинхроннной загрузки через javascript:

  

Еще пару лет назад это было проблемой, но теперь ее нет.

Конвертация не стандартных шрифтов

Не расказал про инструмент конвертации TTF шрифтов во все необходимые форматы, для кроссбраузерного решения. Решение для конвертации предлагает сайт www.fontsquirrel.com. В простонародье белка.

Font Squirrel

P.S. Не забывайте, уважаемые друзья, что у шрифтов есть авторы, и порою лицензии на шрифты имеют коммерческий характер. Убедитесь перед использованием, что шрифт бесплатен или приобретена лицензия на его использование. А то будет у вас, как в студии Лебедева — Незаконное использование шрифта.

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

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