webページに独自のフォントを利用する

date:2018/8/18

本日はWEBページで外部フォントを利用する方法です。任意の位置に、自分のコードを導入することが出来ます。
例えば以下のようにフォントを変更することが可能です。

Let's use Original font

@font-faceで外部フォントを利用する

独自のフォントを使うには@font-faceを使います。
各設定方法は、「 font-familyで利用したいfontの名前を定義」「srcでフォントの保存場所を設定」「formatはフォントの形式を設定します」となります。

@font-face {
    font-family: AlexBrush-Regular_font;  /* フォントに名前を付ける */
    src: url('/fonts/AlexBrush-Regular.ttf') format('truetype');  /* フォントのURLを指定する */
}

フォントは今後の利便性も含めて特定のフォルダにまとめておく事をオススメします。
例えば私のWEBサイトではfontsフォルダにまとめています。

formatの設定

指定タグに該当フォントを適用する

cssの記載方法です。font-familyで@font-faceのfont-familyで定義した名前で記載します。

.menu_title{
    font-size:30px;
    font-family:AlexBrush-Regular_font;
    color:#173c77;
    margin:0 0 5px 0;
    font-weight:bold;
}

HTMLの記載方法です

<span class=menu_title>Let's use Original font</span>

動作結果は以下の通りです。

Let's use Original font

外部フォントを取得・ダウンロードする

本フォントは以下を利用しています。
fontsquirrel

その他にも沢山のフォントが無料で公開されていますので、取得してみて下さいね！