drFonts: ваш надёжный инструмент для управления шрифтами в онлайн‑проекте – ответы, советы и пр.

drFonts – это облачная служба, позволяющая импортировать, хранить и использовать любые шрифты в веб‑ и мобильных проектах. Ниже представлено руководство, основанное на самых распространённых вопросах пользователей, с практическими советами и примерами использования API.

Как подключить drFonts в проект?

1. Зарегистрируйтесь на сайте drFonts и получите API‑ключ. 2. Включите шрифт с помощью CSS‑правила:

@font-face {
  font-family: 'MyFont';
  src: url('https://api.drfonts.com/v1/fonts/MyFont.woff2?key=YOUR_KEY');
}
body { font-family: 'MyFont', sans-serif; }
 

или через JavaScript Loader:

https://api.drfonts.com/v1/load?font=MyFont&key=YOUR_KEY

Частые ошибки при работе с API

• Неверный формат URL – внимательно проверьте конечную точку и параметры.
• Задержки при загрузке – используйте CDN, чтобы шрифты доставлялись с ближайшего сервера.
• Отсутствие кэширования – вместо прямой ссылки добавьте кэш‑бустинг (префикс ?v=1.2.3).

Темные темы: как избежать «плавающих» букв

При использовании пользовательских шрифтов в темных UI иногда буквы «плавают» на фоне. Решение: задать

text-shadow: 0 0 2px #000;

font-smooth: always;

Как испытать совместимость шрифтов в браузерах?

drFonts автоматически генерирует все необходимые форматы (WOFF2, WOFF, TTF). Однако лучше уточнить загрузку в свойствах

@font-face

src: url('...woff2') format('woff2'),
     url('...woff') format('woff');

Лайфхаки для экономии трафика

1. Используйте subset‑технологию: drFonts позволяет генерировать шрифты только с нужными глифами.
2. Ленивая загрузка: defer подключить шрифт только после первого скролла.
3. Уменьшите веса: отключите символы для кириллицы/латиницы, если они не нужны.

Интеграция с популярными CMS

Большинство систем – WordPress, Joomla, Drupal – имеют готовые плагины для drFonts. Стоит подключить плагин и сконфигурировать API‑ключ в настройках темы.

Практический тест: как быстро заменить шрифт на сайте

1) В поиске консоли Chrome откройте вкладку «Fonts». 2) Ознакомьтесь с текущим пулом шрифтов страницы. 3) Добавьте ваш шрифт через

@font-face

style.css

Поддержка и сообщество

drFonts предоставляет официальную документацию, чат в Slack и форум. Если возникнут вопросы, рекомендуем сначала просмотреть раздел FAQ, а потом задать конкретный запрос в поддержку.

Перейти к источнику