2012-03-02 更新日 2023-11-05 css Edit on GitHub

CSS でカスタムフォントを使う方法

@font-face ルールを使って CSS3 でカスタムフォントを使う方法を、構文の例とデモを交えて解説します。

著者: Marius Bughiu · 1 分で読めます · 2012-03-02

CSS3 では @font-face ルールを使ってカスタムフォントを利用できます。追加はとても簡単で、構文は次のとおりです。

@font-face {
    font-family: someFont;
    src: url('path/font.ttf');
}

これでフォントをページ内で使用できるよう宣言できます。例えば次のような記述です。

@font-face {
    font-family: CODEBold;
    src: url('../fonts/CODEBold.otf');
}

カスタムフォントをテキストに適用するには、font-family プロパティを使います。

<h1 style="font-family: CODEBold">Start Debugging</h1>

カスタムフォントの良い入手先としては dafont.com があります。デモはこちら: Custom Fonts Demo

Comments