2015-12-09 2 views
-1

У меня есть пользовательский шрифт на моем веб-сайте, и я загрузил его на свой сайт.Почему мой веб-шрифт не применяется?

This - это мой сайт.

Я хочу применить весь свой Интернет oswaldlight. Так как сейчас, я загрузил шрифт в известную папку для меня и добавили его в качестве @font-face, как это:

@font-face { 
font-family: 'oswaldlight'; 
src: url('../font/oswald/oswald.light-webfont.eot'); 
src: url('../font/oswald/oswald.light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/oswald/oswald.light-webfont.woff2') format('woff2'), 
    url('../font/oswald/oswald.light-webfont.woff') format('woff'), 
    url('../font/oswald/oswald.light-webfont.ttf') format('truetype'), 
    url('../font/oswald/oswald.light-webfont.svg#oswaldlight') format('svg'); 
font-weight: normal; 
font-style: normal; 

} 

Этот фрагмент кода был добавлен в моем фтп. А если проверить, какой шрифт использует каждый заголовок, вы видите это с помощью Firebug:

element.style { 
    color: #000000; 
    font-size: 24px; 
    font-weight: normal; 
    line-height: 40px; 
    margin: 12px 0 0; 
    padding: 0; 
    text-align: left; 
    text-transform: uppercase; 
} 
*::before, *::after { 
    box-sizing: border-box; 
} 
*::before, *::after { 
    box-sizing: border-box; 
} 
.heading h2 { 
    font-family: "oswaldlight"; 
    font-size: 24px; 
    font-weight: normal; 
    line-height: 30px; 
    text-transform: uppercase; 
} 

Но это еще не применяется к моей статье. Любая идея, почему она не применяется?

EDIT: Я видел ошибку, о которой упоминает @Lucky Chingi. Я добавил к моим .htcaccess следующим строкам:

# BEGIN WordPress 

Header add (also tried 'set') Access-Control-Allow-Origin "*" 

# END WordPress 

Но она по-прежнему не работает ... Любые предложения?

+0

действительно ли консоль показывает любые ошибки 404? Кроме того. .Woff имеет столь широкую поддержку, что я не вижу смысла прикладывать какие-либо другие расширения, кроме woff. –

+0

Похоже, что ваш путь к файлу может быть отключен, используя '../' для поднятия уровня относительно того, где хранится ваш файл css. –

+3

Шрифт от источника «http://smolinaperez.nom.es» был заблокирован от загрузки политикой совместного использования ресурсов Cross-Origin: заголовок «Access-Control-Allow-Origin» присутствует на запрошенном ресурсе. Следовательно, для источника http://ginsandtonics.es 'не разрешен доступ. - на консоли Chrome Dev –

ответ

0

Наконец, это была проблема с моим веб-доменом, который указывал на другой частный домен. Через некоторое время она закончилась, указывая на мою судьбу. Спасибо, ребята!

-1

попробовать

*{font:100%/1.0 'oswaldlight';}

убедитесь, что ваш путь к этому шрифту-файл (ы) являются правильными
и удалить заголовки, если это возможно, некоторые браузеры ведут себя по-разному с некоторыми заголовками

0

Вы дон Вам не нужно размещать свои шрифты на своей странице. Google быстро предоставляет шрифты.

Так что вы можете сделать:

@import url(https://fonts.googleapis.com/css?family=Oswald); 

Это импортирует шрифт как 'Освальд', используя @font-face. Если вы введете вышеуказанный URL-адрес в браузер, вы также увидите, что он динамически загружает разные файлы в зависимости от того, какой браузер вы используете. Попробуйте Firefox и в Chrome, чтобы убедиться сами.

Теперь везде, где вы хотите Oswald, просто наберите:

font-family: Oswald; 

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

Смежные вопросы