Невозможно отобразить пользовательские шрифты, используя @ font-face - PullRequest
Новая
       9

Невозможно отобразить пользовательские шрифты, используя @ font-face

1 голос
/ 09 апреля 2020

Я использую @ font-face, чтобы попытаться загрузить шрифт Archisto на мою веб-страницу. Я новичок ie в создании веб-страниц и использовании @ font-face. Я выполнил все шаги в нескольких уроках и просмотрел несколько тем здесь, но не могу загрузить шрифт.

У меня есть файл css, загруженный в папку http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/css/Archistico.css

У меня есть файл шрифта, загруженный в папку http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF

Код @ font-face в файле. css выглядит следующим образом: 

@font-face {
    font-family: Archistico;
    src: url(http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF);

}

Я вызываю шрифт с нестандартным CSS, который выглядит следующим образом: 

.page-content h5{
    font-family: 'Archistico' !important;
    font-size: 50px !important;
    display: inline !important;
    color: #231400 !important;
}

Страница, на которой я пытаюсь заставить это работать: www.unfoldmyworld.com

Буду очень признателен за вашу помощь!

Ответы [ 2 ]

0 голосов
/ 09 апреля 2020

1- Добавьте в раздел заголовка веб-страницы. <link href="//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico" rel="stylesheet" type="text/css"/>

-2 Используя директиву @import CSS, добавьте следующую строку в файл css. (Http | https ) 

@import url(//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico);

-3 Использовать объявление шрифта-шрифта. (Http | https) 

@font-face {font-family: "Archistico"; src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot"); src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff") format("woff"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.svg#Archistico") format("svg"); }

Дайте мне знать, если это работает для вас :) Спасибо

0 голосов
/ 09 апреля 2020

Вы пробовали это с относительным URL? Я имею в виду проблему CORS (общего ресурса). 

@font-face {
   font-family: Archistico;
   src: url('../fonts/FONT_11.TTF');
}
...