Я не могу загрузить загруженные шрифты на заголовок моего сайта - PullRequest
Новая
       15

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

0 голосов
/ 12 января 2019

Я могу точно изменить цвет заголовка, но с трудным изменением шрифта, чтобы он мог использовать все различные типы шрифтов (т.е. .eot, .svg, .tff, .woff и .woff2).

Все мои файлы шрифтов сохраняются на веб-сервере: / httpdocs / wp-content / themes / leeway / css / fofbb

и поэтому я поместил в файл style.css следующее: (\ httpdocs \ wp-content \ themes \ leeway \ style.css) 

#logo .site-title {
    font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
    display: inline-block;
    padding: 0.15em 0;
    font-size: 2.7em;
    color: #92f442; }
#logo .site-title a:link,
#logo .site-title a:visited {
    font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
    display: inline-block;
    padding: 0.15em 0;
    color: #92f442;}
#logo .site-title a:hover,
#logo .site-title a:active {
    font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
    display: inline-block;
    padding: 0.15em 0;
    color: #92f442;
    text-decoration: none;}

Я знаю, что я определенно изменяю правильный элемент, так как когда я меняю его цвет, который меняется ОК.

Может кто-нибудь сообщить мне, что не так с моим кодом и почему мой новый шрифт не отображается?

Приветствия

Пол

Ответы [ 2 ]

0 голосов
/ 12 января 2019

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

@font-face {
  font-family: "fofbb";
          src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
               url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
               url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
               url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
}

#logo .site-title {
  font-family: "fofbb"
}
<div id="logo">
  <div class="site-title">site title</div>
</div>

Нажмите здесь для получения дополнительной информации о @font-face rule.

0 голосов
/ 12 января 2019

Попробуйте переименовать ваш шрифт как fofbb . то есть fofbb.woff , fofbb.tff и т. д.

у меня это сработало.

...