Пользовательское вложение шрифтов НЕ РАБОТАЕТ Перекрестный браузер

Question

У меня есть собственный шрифт «Gulim», встроенный в мой сайт на mangodownload.com (вы можете увидеть его на главной странице, если вы видите Arial, это не работает ваш браузер.)

К сожалению, этот шрифт НЕ работает во многих браузерах.

Вот мой CSS для шрифта:

@font-face { 
    font-family: "Gulim"; 
    src: url("/style/fonts/Gulim.ttf"); 
    src: local("Gulim"), url("/style/fonts/Gulim.ttf") format("truetype"); 
} 

Любые идеи о достижении поддержку кросс-браузер для всех браузеров?

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: Я попытался преобразовать шрифт и попробовал FontSquirrel. Я продолжаю получать одно и то же сообщение; «размер шрифта слишком большой». Мой gulim.ttf файл 10mb.

Answer 1

@font-face { 
    font-family: 'yourfunkyfont'; 
    src: url('fonts/yourfunkyfont.eot'); 
    src: url('fonts/yourfunkyfont.svg') format('truetype'), 
     url('fonts/yourfunkyfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/yourfunkyfont.woff') format('woff'), 
     url('fonts/yourfunkyfont.ttf') format('truetype'), 
     url('fonts/yourfunkyfont.svg#yourfunkyfont') format('svg'); 
} 

это будет работать только если вы добавляете следующие MIME-типы в вашем IIS (другой веб-сервер):

.woff - application/x-font-woff 
.svg - application/x-font-woff 

Answer 2

Невозможно сделать этот кросс-браузер, если вы не можете получить свой шрифт в различных форматах, требуемых различными браузерами. CSS to use выглядит следующим образом:

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
} 

Как вы можете видеть, что вам нужно шрифт в eot, woff, ttf и svg форматов.