2015-07-22 3 views
1

Я недавно разработал сайт Wordpress, используя тему Esteem. На моем сайте я использую собственный шрифт под названием GeosansLight и для использования этого шрифта. Я использую трюк @ font-face css.@ font-face не отображается правильный шрифт во всех браузерах

Однако, правильный шрифт, кажется, появляется на Сафари. Когда вы просматриваете сайт в Chrome, Firefox или IE, шрифт неверен.

Пожалуйста, кто-нибудь может помочь, поскольку сайт очень основан на этом шрифте.

Вот часть моего CSS, которая вызывает @ шрифт лицо и присваивает этот шрифт для моих различных элементов:

@font-face { 
font-family: 'geosanslight'; 
src: url('/wp-content/themes/esteem/fonts/geosanslight-webfont.ttf') format('truetype'); 
src: url('/wp-content/themes/esteem/fonts/geosanslight-webfont.svg') format('svg'); 
} 

body, h1, h2, h3, h4, h5, h6, p, li, a { 
font-family: "geosanslight", sans-serif !important; 
} 

Спасибо заранее.

+0

этот вопрос уже был дан ответ здесь http://stackoverflow.com/ a/31543364/1716437 – Ammadu

+0

@Zaq Mughal Пожалуйста, избегайте дублирования своих вопросов - вернитесь к своему первоначальному вопросу и ответьте на вопросы, которые мы задали вам, чтобы мы могли помочь. – vard

ответ

2

Вам не хватает большого шрифта для font-face, а другие браузеры не хотят svg или truetype.

Возьмите шрифт Webfont Generator

этого будет генерировать все, что нужно для вашего сайта, включая CSS, и все файлы шрифтов.

также для корня, если вы ставите CSS в основной style.css в ваших темах корень, то все, что вам понадобится: src: url('fonts/geosanslight-webfont.ttf')

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