6 февр. 2025

Как подключить свой шрифт в Craftum

Для установки нестандартного шрифта на сайт (отсутствующего в коллекции шрифтов рядового посетителя вашего сайта) мы можем:

Использовать шрифты, расположенные на специальном хостинге шрифтов;
Разместить необходимый шрифт на собственном сервере.

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

Google Font;
Adobe Edge Web Fonts и многие другие.

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

Первое

Этот код в файл домена в .htaccess

Если он там есть то нечего делать не надо!

Подсмотрел идею и решение тут

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"
    Header set Access-Control-Allow-Methods "GET, PUT, POST"
  </FilesMatch>
</IfModule>

Далее пример кода в <body> вашего сайта


<style>
@font-face {
    font-family: 'Propaniac';
    src: url('https://ozonbanner.ru/fonts/Propaniac.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
</style>

И подключаем силь в <body>


<style>
.bill2 {
    font-family: 'Propaniac', sans-serif;
}
</style>

Комментарии

Модификации

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

Для сайта

Craftum Конструктор сайтов Craftum