1

I'm trying to import a font to website I'm making using @font-face. But it won't work on Chrome what so ever, and sometimes it works on Firefox and sometimes not.

So I have no idea what is going on.

This is what I've tried so far:

@font-face {
    font-family: "Proxima Nova";
    src: url('fonts/Proxima Nova.otf') format('opentype');
}

That almost worked in Firefox but Chrome didn't even want to display it, instead it showed some weird font with completely random size that had nothing to do with the css entered.

Then I tried this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'proxnova';
        src: url('fonts/ProximaNovaSemibold.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }
}

This fixed sizing issues but now it doesn't show proper font anywhere. Please help.

4

1 に答える 1

4

ブラウザごとに異なるフォント形式を使用する必要があります。申し訳ありません... :(

ソース: http://css-tricks.com/snippets/css/using-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.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

http://www.fontsquirrel.com/のような Web サイトを使用して、必要なものをすべて自動的に生成できます。

于 2012-09-24T08:10:29.303 に答える