Как загрузить шрифт в приложение vn

Обновлено: 06.01.2025

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

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

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

Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.

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

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в <head> ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

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

Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.

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

Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2 , о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.

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

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

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

Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.

Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .

Базовый вариант правила:

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

Оптимизация

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

FOIT, FOUT и FOFT

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

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .

Свойство font-display

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

auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .

Предзагрузка шрифтов

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

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

Для того, чтобы предзагрузка сработала, нужно поместить в <head> ссылку на шрифт и задать атрибуту rel значение preload :

Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.

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

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в <head> при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

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

Полезности

Подключение шрифтов — часть вёрстки

А научиться вёрстке проще, чем кажется. Скидка 1000₽ по промокоду SKUCHNO.

В закладки

Одним из малозаметных нововведений iOS 13 и iPadOS стала поддержка сторонних шрифтов.

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

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

Сейчас подробно рассмотрим все особенности работы со сторонними шрифтами на iPhone и iPad.

Где появилась поддержка сторонних шрифтов

С релизом iOS 13 и iPadOS поддержка сторонних шрифтов появилась во всех приложениях Apple, где есть опция форматирования текста.

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

Сторонние разработчики получили в свое распоряжение специальные API, внедрение которых позволит использовать установленные сторонние шрифты из iOS 13.

За прошедшие полгода многие программы обзавелись это полезной возможностью.

Какие форматы шрифтов поддерживаются

В мобильных операционных системах Apple появилась поддержка следующих типов шрифтов:

TTF (TrueType Font), который основан на совместной разработке Apple и Microsoft конца 80-х годов. Тогда компании объединились, чтобы предоставить достойную альтернативу векторным шрифтам от Adobe. На данный момент этот формат шрифтов наиболее распространён как в Windows, так и в macOS.

OTF (OpenType Font), основанная на TrueType разработка Adobe и Microsoft середины 90-х годов. Шрифты поддерживаются операционными системами macOS, Windows и Linux.

Где искать новые шрифты

На данный момент шрифты можно найти на сайтах разработчиков: Adobe, DynaFont, FounderType, Monotype, Morisawa.

Есть возможность установки шрифтов через приложения из App Store. Добавление сторонних шрифтов на iOS 12 и более ранних версиях тоже возможно, но для этого требуется установка сторонних профилей разработчиков.

Как установить новые шрифты на iPhone и iPad

Есть сразу несколько способов добавить новые шрифты в iOS. Обратите внимание, что добавленные данные не мигрируют между устройствами через iCloud или другой облачный сервис.

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

1. Установка через приложение

Такой способ возможен на любом устройстве с iOS 13 или iPadOS. Нужно лишь найти подходящую программу в App Store.

Предлагаем такие бесплатные альтернативы:

Нужно просто найти подходящий шрифт в приложении, нажать кнопку Установить (Install) и подтвердить установку шрифта на устройство.

Теперь во время редактирования текста достаточно перейти в настройки и выбрать установленный шрифт.

2. Установка через профиль

Данный способ позволяет устанавливать сторонние шрифты на более ранних версиях iOS.

Найти шрифты в данном случае можно при помощи таких приложений:

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

Как удалять шрифты из iOS

Для удаления шрифтов, которые устанавливались через приложения для iOS 13 или iPadOS, нужно сделать следующее:

2. Найдите ненужный шрифт в списке или через поиск.

3. Свайпом удалите установленный шрифт.

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

2. Выберите профиль ненужного шрифта.

3. Удалите профиль из системы.

Теперь вы знаете все об одной из самых малоизвестных фишек iOS 13 и iPadOS.

(9 голосов, общий рейтинг: 4.33 из 5)

В закладки

Ранее мы писали о том, Google добавили в Android поддержку шрифтов из своего каталога Google Fonts. В этой статье мы подробно рассмотрим, как можно это реализовать в своём приложении.

Благодаря Google Fonts вы можете использовать тысячи самых разных шрифтов в своих приложениях. Более того, эта возможность теперь распространяется не только на Android O (API 26), но также на все устройства, начиная с API 14, благодаря использованию библиотеки поддержки.

Использование загружаемых шрифтов несёт в себе следующие преимущества:

уменьшение размера APK (вам не нужно включать в проект .ttf файлы со шрифтами);
приложение на устройстве пользователя могут совместно использовать шрифты из одного источника, не раздувая хранилище избыточными файлами.

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

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

Такая схема необходима, чтобы система не вносила вредоносного кода в файлы.

В приложении Фонарик используется таймер со специальным шрифтом, который хранится в папке assets проекта. Чтобы уменьшить размер APK файла, перепишем приложение, используя загружаемые шрифты.

Добавить загружаемые шрифты в своё приложение можно двумя способами.

Через Android Studio

Откроется окно со списком всех шрифтов, доступных в Google Fonts, где можно выбрать любой понравившийся. Выберем шрифт Orbitron и нажмём ОК. Важно здесь выбрать именно Create downloable font, поскольку Add font to project просто добавит шрифт в проект, что противоречит текущей цели.

После этого Android Studio сама создаст необходимые файлы. В папке res/font будет создан файл orbitron.xml, в папке res/values файлы preloaded_fonts.xml и font_certs.xml.

orbitron.xml

Этот файл содержит определения для Android о семействе шрифтов. Как вы можете видеть, в нём перечислены fontProvider, fontProviderCerts, которые были автоматически созданы в Android Studio.

preloaded_fonts.xml

Android Studio создаёт этот файл, чтобы помочь предварительно загрузить шрифты. Это нужно, чтобы избежать задержки, когда шрифт не отображается при старте приложения. Рендеринг картинки является синхронным процессом, поэтому первый рендер может занять некоторое время, пока Android загружает шрифт. Объявление этого файла в манифесте нужно для того, чтобы приложение получило шрифт в начале работы, до отрисовки экрана.

Android Studio сама добавляет в манифест метатег, содержащий путь до файла preloaded_fonts.xml.

font_certs.xml

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

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

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

Как использовать загружаемые шрифты на старых устройствах?

Для этого вам нужно добавить библиотеку поддержки в файл build.gradle модуля приложения.

Кроме того, библиотека поддержка была перенесена в maven репозиторий Google, поэтому вам больше не нужен SDK Manager для загрузки библиотеки. Чтобы добавить maven репозиторий Google, добавьте следующую строку в repositories файла build.gradle модуля проекта.

Программное добавление загружаемых шрифтов

Чтобы добавить шрифт программно, нам понадобятся два класса:

для создания запроса на получение шрифта для создания объекта Typeface после получения результата запроса шрифта

Приложение будет извлекать шрифты из провайдера с помощью API FontsContract. У каждого провайдера есть свой собственный набор ограничений на версии Android и язык запросов, который он поддерживает.

Итак, для начала создадим экземпляр класса FontRequest.

В параметрах указываются:

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

Теперь достаточно вызвать метод FontsContract.requestFont(), чтобы получить шрифт. Этот метод проверит, находится ли шрифт в кеше. Если его там нет, то он обращается к провайдеру шрифтов, чтобы извлечь шрифт и передать в callback.

Как только FontRequestCallback получает объект Typeface, он устанавливает его в нужный виджет. Это наглядно можно увидеть на GIF ниже.

Вот и всё! Теперь с помощью загружаемых шрифтов вы можете использовать огромный ассортимент самых разных шрифтов и при этом не увеличивать размер вашего APK файла.

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

Содержание

Если вам не так повезло, как владельцам смартфонов от Samsung и LG, у вас стоковый Android или ваша оболочка не поддерживает смену шрифтов, вы можете воспользоваться одним из методов, описанных в данной статье.

Внимание! Дальнейшие действия вы совершаете на свой страх и риск. Автор не несет ответственности за «окирпичивание» ваших устройств.

Как поменять шрифт с помощью лаунчера

Этот способ является наиболее простым и безопасным. Как правило, сторонние лаунчеры умеют гораздо больше, чем просто поменять шрифт. Они позволяют изменить внешний вид Android до неузнаваемости. Однако, не все оболочки имеют опцию смены шрифта. В большинстве своем лаунчеры могут установить тот шрифт, который идет в пакете с темой оформления. Например, такая возможность есть в Apex Launcher и Holo Launcher.

Дополнительные опции по замене шрифта присутствуют и в Action Launcher 3, который предлагает изменить его стиль на один из вариантов семейства Roboto. Правда поменять таким образом системный шрифт на кардинально другой тип – не получится.

GO Launcher – пожалуй, наиболее функциональный среди остальных лаунчеров в этом вопросе. Он может менять шрифт на любой другой, найденный на устройстве.

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

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

Как поменять шрифт с помощью приложений

Среди множества программ в Google Play, при помощи которых можно поменять системные шрифты Android, iFont является одной из самых популярных. Приложение позволяет загрузить и установить понравившийся шрифт в пару кликов. Все что для этого нужно – это выбрать его из каталога или воспользоваться поиском.

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

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

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

FontFix – еще одно приложение для замены системных шрифтов на Android с приятным интерфейсом. Программа загружает их из трех источников: Google Fonts, Font Squirrel и DaFont. А это более 4 тысяч разнообразных шрифтов, доступных бесплатно для вашего смартфона.

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

Как и предыдущее приложение, FontFix поддерживает два метода установки шрифтов – с помощью ROOT-доступа (для большинства устройств) и на смартфонах, чьи оболочки имеют FlipFont, что позволяет сменить шрифт без ROOT-прав (Samsung, HTC).

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

Как поменять системные шрифты на Android вручную

Такой метод подойдет энтузиастам, которые не боятся экспериментировать со своим устройством. Обязательным условием для выполнения этой операции является наличие ROOT-прав, чтобы иметь возможность изменять системные файлы на Android. На самом деле поменять шрифт ручным способом не так уж и сложно, как может показаться на первый взгляд. Главное – понимать, какие изменения вы совершаете и четко следовать инструкции.

В системе Android используются шрифты семейства Roboto, которые расположены по пути /system/fonts:

Roboto-Regular.ttf
Roboto-Italic.ttf
Roboto-Bold.ttf
Roboto-BoldItalic.ttf

Для системных шрифтов могут быть и другие варианты названий, но главное, чтобы они начинались на Roboto.

Итак, для процедуры изменения шрифта вам понадобится любой файловый менеджер, умеющий работать с системными файлами и заранее приготовленный шрифт формата TrueType Font (с расширением .ttf), который вы хотите установить. Для примера был использован файловый менеджер ES File Explorer на смартфоне под управлением Android 4.4.2 и шрифт lobster.ttf.

/system/fonts

Roboto-Regular.ttf

Roboto-Regular.ttf.old

В принципе, это все основные способы по изменению системного шрифта на Android. Пишите в комментариях, меняли ли вы шрифты на своем смартфоне/планшете или вас полностью устраивает стоковый шрифт Roboto.