ROROのWEB技術・子育て・ガジェット通信

本WEBページは2児の息子を持つROROの子育てに伴うメリット・デメリットを丸裸にしていきます。例えば旅行であったり家系であったり、どんな生活をしているのかをお楽しみください。また子育ての便利グッズの紹介、ROROの趣味であるガジェットやゲーム情報や勉強なども紹介します。色んなコンテンツをお楽しみくださいね！

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の設定



truetype一般的なフォント形式（拡張子：.ttf）
opentypeOpenTypeフォントです。（拡張子： .ttf, .otf）
woffWeb用の新しいフォント形式です。特徴はデータが軽いことです。（拡張子：.woff）
embedded-opentypeInternet Eplorer 8以前で必要とされた形式です。（拡張子：.eot）
svgSVGフォントです。（拡張子：.svg, .svgz）


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


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

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