3.5 Использование пользовательских шрифтов

Bubble использует Google Web Fonts (!!!ЛНК!!!) для текстовых типов. Google Web Fonts - это библиотека свободно распространяемых шрифтов с открытым исходным кодом для Интернета, размещаемых в Google.

В общем, мы рекомендуем использовать как можно больше веб-шрифтов Google, поскольку они широко используются в Интернете, что предлагает интересную особенность кэширования. Есть вероятность, что другой сайт загрузит используемый вами шрифт, что приведет к более быстрой загрузке страниц. В веб-шрифтах может не быть конкретного шрифта, с которым вы знакомы, но там часто есть очень похожий с открытым исходным кодом. Однако, если вам нужно установить свой собственный шрифт, вы можете сделать это на вкладке "Настройки"/"Settings". Как только шрифт будет установлен в вашем приложении, вы увидите его в верхней части списка в раскрывающемся списке шрифтов.

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

В вашем приложении раздел "Пользовательский шрифт"/"Custom Font" находится в разделе "Настройки"/"Settings" -> "Общие"/"General". Здесь вы можете добавлять новые шрифты и удалять существующие, если они вам больше не нужны. В целом (и это справедливо для многих вещей в Bubble), наличие шрифтов, которые не используются в приложении, замедлит загрузку страницы, поэтому мы рекомендуем хранить только шрифты, которые фактически используются на ваших страницах.

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

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

Сначала вам нужно найти файлы шрифта (например, можно скачать вот этот http://www.fontsaddict.com/fontface/free-sans.ttf/ ) и загрузить его в Bubble. Для этого нужно использовать загрузчик файлов Bubble, нарисовать его на странице и использовать загруженный файл как исходный контент. Сделав это, внизу вы увидите ссылку. Просто скопируйте её. Она должна выглядеть примерно так:

//s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/FreeSans.ttf

После этого, создайте .css файл в текстовом редакторе и скопируйте код, который находится на сайте, с которого вы взяли шрифт.

@font-face {
  font-family: 'Free Sans';
  src: url('http://www.fontsaddict.com/fontface/free-sans.ttf');
}

и замените URL той строкой, которую получили на первом шаге.

@font-face {
  font-family: 'Free Sans';
  src: url('//s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/FreeSans.ttf');
}

Обратите внимание, что мы добавили https: перед URL файла.

Сохраните этот файл font.css (для примера, название не имеет значения), и тоже загрузите его в Bubble, тем же самым способом, который описан в первом шаге. В результате вы получите ссылку вида:

//s3.amazonaws.com/appforest_uf/f1482852801693x129632627328660100/font.css

Вот это вам и нужно будет ввести во вкладке "Настройки"/"Settings". Именем файла будет имя шрифта, а путь к нему - результат шага 3.