Пользовательский шрифт отображается weird

Question

С самого начала мне нужно сказать, что я знаю, что я пытаюсь сделать, это не «правильный способ сделать это», но клиент, над которым я работаю, отчаянно хочет ЭТОГО конкретного шрифта.

Итак, мне нужно использовать на веб-сайте клиента точный шрифт, который использует VOGUE. Поэтому я взял .eot & .ttf и загрузил их на свой сервер. Затем я добавил определения CSS:

/*fonts fonts for IE*/ 
@font-face { 
    font-family: VogueDidot; 
    src: url('font/FBDidotL-Regular.eot') format('embedded-opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "VogueDidot Light"; 
    src: url('font/FBDidotL-Light.eot') format('embedded-opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

/*fonts for other browsers*/ 
@font-face { 
    font-family: VogueDidot; 
    src: url('font/FBDidotL-Regular.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "VogueDidot Light"; 
    src: url('font/FBDidotL-Light.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

И в CSS для моего элемента:

.post h1 { 
    display: block; 
    height: 100%; 
    font-family: VogueDidot; 
    font-size: 55px; 
    text-transform: uppercase; 
    overflow: hidden; 
    line-height: 58px; 
} 

И, как обычно, я ожидал увидеть все работает как шарм.

Но это не ...

Вот как это должно выглядеть следующим образом:

И вот как это выглядит на моем сайте:

Любые идеи ?

Answer 1

Похоже, браузер пытается отобразить шрифт полужирным шрифтом и повторять серые пиксели (от тонких линий) рядом друг с другом. Попробуйте использовать font-weight: normal (font-weight:bold наследуется от элемента h1).