web-dev-qa-db-ja.com

Webサイトでカスタムフォントを使用するにはどうすればよいですか？

私のウェブサイトが見栄え良くなるためには、カスタムフォント、特にトンブリボールドを使用する必要があります。問題は、ユーザーがインストールしない限りフォントが表示されないことです。また、Firefoxでは表示されません。

この問題の回避策はありますか？

htmlfonts
70
James Logan

次のようにスタイルシートにフォントをインポートする必要があります。

@font-face{
    font-family: "Thonburi-Bold";
    src: url('Thonburi-Bold.ttf'),
    url('Thonburi-Bold.eot'); /* IE */
}
101
Zencode.dk

CSS3 font-faceまたはwebfontsを使用できます

@ font-face usage

@font-face {
   font-family: Delicious; 
   src: url('Delicious-Roman.otf');
}

webfonts

google Webfontsをご覧ください http://www.google.com/webfonts

12
Muthu Kumaran

はい、方法があります。 CSSで呼び出されるカスタムフォント。CSSを変更する必要があり、それらのフォントをWebサイトにアップロードする必要があります。

これに必要なCSSは次のとおりです。

@font-face {
     font-family: Thonburi-Bold;
     src: url('pathway/Thonburi-Bold.otf'); 
}
8
Dorvalla

CSSを使用すると、Webサイトでダウンロード可能なカスタムフォントを使用できます。 myfont.ttfのように、好みのフォントをダウンロードして、ブログやウェブサイトがホストされているリモートサーバーにアップロードできます。

@font-face {
    font-family: myfont;
    src: url('myfont.ttf');
}
7
hermann

まず、サーバーのどこかにフォントを.otfまたは.ttfとして配置する必要があります。

次に、CSSを使用して、次のように新しいフォントファミリを宣言します。

@font-face {
    font-family: MyFont;
    src: url('pathway/myfont.otf'); 
    }

フォントファミリを宣言したCSSファイルにドキュメントをリンクする場合、他のフォントと同じようにそのフォントを使用できます。

1
Simon Carlson