2013-04-26 3 views
0

Я использую код шрифта google, используя их include. Их CSS выглядит следующим образом:Google Fonts не показывает Chrome и IE

@font-face { 
    font-family: 'Oswald'; 
    font-style: normal; 
    font-weight: 300; 
    src: url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDfY6323mHUZFJMgTvxaG2iE.eot); 
    src: local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDfY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 

С помощью этого я создал класс CSS

.oswald { 
    font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif 
} 

Затем я использую, что как этот

<div class="oswald">text</div> 

Вот где он получает немного странно. Я использую Visual Studio, поэтому, когда я отлаживаю его локально, я вижу правильный шрифт. Когда я размещаю его на сервере, он показывает мне шрифт Verdana. Chrome также показывает неправильный фронт. Safari и Firefox показывают правильный шрифт.

ответ

2

Я преобразовал Oswald Regular в необходимые форматы @font-face (TTF, OTF, EOT, SVG, WOFF).

@font-face { 
    font-family: 'Oswald'; 
    font-style: normal; 
    font-weight: 300; 
    src: url('Archive/Oswald-Regular.eot'); 
    src: local('Oswald'), url('Archive/Oswald-Regular.woff') format('woff'), url('Archive/Oswald-Regular.ttf') format('truetype'), url('Archive/Oswald-Regular.svg#Oswald-Regular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

А вот ссылка на архив ZIP, содержащий преобразованные шрифты: http://www.mediafire.com/?9xdr1w9wyvdoh09

+0

Это исправлено для Chrome, любые идеи для IE? – Jhorra

0

Я считаю, с помощью CSS @import править намного более надежным и избавляет от необходимости иметь 5x форматы шрифтов, необходимых для совместимости браузеров. Переместите это в верхнюю часть вашего файла CSS:

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300); 

PS. Это будет включать: свет(), регулярный (font-weight: 400) и полужирный (font-weight: 700) для Освальда.

+0

Это то, что у меня было, я просто вложил то, что показал их CSS, чтобы вы могли видеть все. – Jhorra

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