CSS Импорт шрифтов

Question

У меня есть 4 шрифты мне нужно использовать на веб-сайте и у меня там файлы в моем веб-папке

Baskerville.ttc 
BellGothicstd-Black.otf 
BellGothicstd-Bold.otf 
JennaSue.ttf 

Я попытался Импортируйте помощью @Import и шрифты все еще не работают здесь это то, что я использовал:

@import url(../fonts/BellGothicStd-Black.otf); 
@import url(../fonts/BellGothicStd-Bold.otf); 
@import url(../fonts/Baskerville.ttc); 
@import url(../fonts/JennaSue.ttf); 

Я также попытался использовать @ шрифт лицу правило, это то, что я использовал:

@font-face { 
    font-family: 'BellGothicBlack'; 
    src: url('../fonts/BellGothic-Black.otf') format('OpenType'), 
} 
@font-face { 
    font-family: 'BellGothicBold'; 
    src: url('../fonts/BellGothicStd-Bold.otf') format('OpenType'), 
} 
@font-face { 
    font-family: 'Baskerville'; 
    src: url('../fonts/Baskerville.ttc') format('OpenType'), 
} 
@font-face { 
    font-family: 'JennaSue'; 
    src: url('../fonts/JennaSue.ttf') format('TrueType'), 
} 

Может кто-нибудь сказать мне, что я делаю неправильно? Я думаю, что, возможно, мне не хватает кода, я не уверен.

Заранее спасибо Том

Answer 1

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

http://www.fontsquirrel.com/tools/webfont-generator

Ваш @font-face правила необходимо будет также включать в себя все типы шрифтов ...

Пример:

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

Answer 2

U необходимо сгенерировать шрифт-фасето всех шрифтов для совместимости ОС и браузера.

Font-лица генератор URL: http://www.fontsquirrel.com/tools/webfont-generator

@font-face { 
font-family: 'Helvetica'; 
src: url('helvetica.eot'); 
src: url('helvetica.eot?iefix') format('eot'), 
url('helvetica.woff') format('woff'), 
url('helvetica.ttf') format('truetype'), 
url('helvetica.svg#helvetica') format('svg'); 
font-weight: normal; 
font-style: normal; 
}