@font-face{} : 外部で公開されているフリーフォントをサイトへ適用させる方法

Webサイトを制作する上で、考えるものの一つである「フォントの種類」。
このサイトのフォントかっこいいな, 可愛いなと思いつつも自分の好きなフォントをダウンロードして、使う方法は??なんて思ったことはないでしょう

今回は、外部で公開されているフリーフォントをサイトへ適用させる方法について一緒にみていきましょう。

✅   フリーフォントとは何か？
✅   「めもわーる」というフォントをサイトに反映させる手順
✅   @font-face{}の定義方法

フリーフォントとは??

フリーフォントは、ネット上などで無料配布されているフォント集になります。
英語のみのものもあれば、ひらがな/カタカナ/漢字などに対応しているものまで、幅広く公開されてます。

主に提供しているサイトなどについては、以下のようなものが挙げられます。

    FONTDASU : https://fontdasu.com/
    FONT FREE : https://fontfree.me/
    FONT BEAR : https://fontbear.net/
    フロップデザイン : https://www.flopdesign.com/
    ヤマナカデザインワークス : http://ymnk-design.com/font-2/

フリーフォントの使い方

今回は、FONTDASUというサイトにて掲載されているフォントを用いて、実際に使い方をみていきましょう。

ダウンロード

FONTDASUというサイトが開けたら、「めもわーる」という名前のフォントを探しましょう。

「めもわーる」を見つけたら、続きを読むをクリックしてください。

以下のように「めもわーる」の詳細ページに飛びますので、下にスクロールしていきましょう。
「配布サイトでダウンロード」というボタンが見えたら、クリックです。

配布サイトへ遷移したら、また下にスクロールしてください。
ダウンロードの文字が見えてきたら、クリックです。

ダウンロードが完了したら、お好きな場所に保存して頂ければと思います。
次の作業に移る前にzipファイルなので、解凍しておきましょう。

検証用のファイルを準備

ダウンロードの作業も終わりましたので、次は、実際にめもわーるを反映させる方法を確認していくためのHTML/CSSファイルを準備していきます。

HTML, CSS共に以下のコードをコピペして頂ければOKです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="font_test.css">
        <title>フォントテスト</title>
    </head>
    <body>
        <h1>フォント : めもわーるを適用</h1>
        <p>アイウエオ, あいうえお, ABCDEF</p>
    </body>
</html>

body {
    margin:0px;
    padding:0px;
}

保存場所は、解凍して頂いたフォルダ内でOKです。
現状のフォルダ内は、以下のようになっています。

フリーフォントを実装

ここまで準備が整ったら、いよいよ今回のメインをやりましょう。
まず、フォントを適用させていく上で、@font-face{}というものを使っていきます。外部からダウンロードしたものや公開されているフォントを扱う上で、必要になりますので、覚えていきましょう。

書き方としては、以下を参考にしてください。

書き方

実装

最後にベースとして準備したファイルへ追加記述していきます。
CSSファイル(font_test.css)を開き、次のコードを追加してください。

/*  使えるフォントとして、"めもわーる"を追加  */
@font-face {　　
    /*   適用させるフォント名 → 間違っていると反映されないので注意  */
    font-family: "めもわーる";
    /*   .otf, .ttfの拡張子がついているファイルがフォントファイルである。   */
　　 /*   フォントファイルが何処場所にあるのか : パスを書いてあげる   */
    src: url(memoir.otf);
}

p {
    /*  @font-face{}は、あくまで使用できるフォントを追加するのみ。
　　　　　そのフォントを使いたい要素で定義することで、利用することができる　　*/
    font-family: "めもわーる";
    font-size: 30px;
}