[解決済み] CSSを使用してカスタムフォントを使用する？

質問

新しいウェブサイトで、サイト上でカスタムフォント（通常のArialやTahomaなど以外）を使っているのを見かけました。

しかも、いい具合にブラウザをサポートしている。

どうやったらそんなことができるのか？可能であれば、人々がフォントを自由にダウンロードできないようにすることも。

解決方法は？

一般的に、カスタムフォントを使用する場合は @font-face をCSSに記述してください。以下は、ごく基本的な例です。

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

次に、特定の要素でそのフォントを使用するためのトリビアルな方法です。

.classname {
    font-family: 'YourFontName';
}

( .classname がセレクタです）。

フォントフォーマットによっては、すべてのブラウザーで動作するわけではないことに注意してください。 fontsquirrel.com のジェネレータを使えば、変換の手間を省くことができます。

無料のウェブフォントは、以下のサイトから入手できます。 Googleフォント (自動生成されたCSSもあります。 @font-face のルールがあるので、自分で書く必要はありません)。

同時に、可能であれば、人々がフォントを自由にダウンロードすることができないようにする。

CSSでカスタムフォントを埋め込んで、ダウンロードできないようにしながら、テキストをスタイルすることはできません。画像やFlashを使うか、あるいは HTML5 キャンバス いずれも実用的ではありません。

お役に立ったでしょうか？