Свои шрифты для веб-страницы (обновленная версия)

Предыдущая статья устарела, т.к. файлик htaccess оттуда уже не проходит CORS и шрифты не работают. Предыдущая инструкция: https://t.me/taplinkbest/7

Видеоинструкция: https://youtu.be/_QmvQg3gfk8

Регнуть хостинг можно тут: https://timeweb.com/ru/?i=15777

Для использования хостинга как хранилища для файлов подойдет самый дешевый тариф

Для добавления шрифта нам понадобится

Свой хостинг, чтобы залить туда шрифт
Домен, чтобы создать в нем поддомен и переделегировать на хостинг
Файлик htaccess, написанный по-новому
Код на самой странице, который обращается к тексту

Текстовая инструкция:

Зайдите в ЛК регистратора домена. Если вы делегировали свой домен на другие сервера (в этом случае в регистраторе будет указано ns1.*название сервиса*.ru, то зайдите в лк сервиса
Создайте A-запись с именем на латинице, который будет адресом вашего поддомена и IP вашего хостинга. Например имя можете поставить "cdn", а ip 148.8.228
Загрузите на хостинг файлы шрифтов в формате otf и woff. Чтобы не ошибиться, можете создать папки на хостинге как в моем примере — папку assets, в ней папку fonts, а нее уже шрифты
В таплинке\тильде инициируйте шрифты, вставив в самый верх страницы в блок html

  @font-face {
   font-family: 'Muller';
    src: url('Muller Regular.otf');
    src: local('Muller Regular'), local('Muller Regular'),
         url('https://files.besttaplink.ru/static/fonts/Muller%20Regular.woff') format('woff'),
  url('https://files.besttaplink.ru/static/fonts/Muller%20Regular.otf') format('opentype');
    font-weight:300;
    font-style: normal;
}

Тут замените мой адрес на свой адрес, а название шрифта на свое название шрифта. Желательно, чтобы имя файла было без пробелов. Если же пробелы есть, замените в ссылке символ пробела на %20, иначе не сработает

Теперь необходимо создать файлик htaccess. Создайте его в корневой директории хостинга и вставьте текст

RewriteEngine On

RewriteCond %{REQUEST_URI} static
RewriteRule static/(.*)$ /assets/$1 [L]

Header set Access-Control-Allow-Origin "*"

Эта конструкция работает только для моего пути к шрифту из примера. То бишь мой путь к шрифту это домен/assets/fonts, если вместо assets у вас другая папка, поменяйте ее в тексте выше. В коде инициации я сознательно использую несуществующий путь со словом static, который заменяется файлом htaccess. Если это слово вам не нравится, можете использовать другое в ссылке на шрифт и другое в коде htaccess. Но лучше всего просто сделайте 1в1 как в примере, только со своим доменом. Так точно сработает!

Теперь необходимо применить шрифт к элементам как было показано в старой инструкции https://www.youtube.com/watch?v=kg5f838VKoM

Если возникнут проблемы, спрашивайте в чатиксе https://t.me/taplinkbestchat прикрепив ссылку на вашу страничку. Также там вам помогут применить шрифт к какому-то элементу, если по видео не получается сделать самостоятельно