ローカルにインストールしたフォントをWEBフォントとして使用する方法【おすすめ無料フォントもご紹介！】

こんにちは！プロクラスの中本です。

今回はローカルにインストールしたフォントをWEBフォントとして使用する方法をご紹介します。
記事の最後にはおすすめの無料フォントもご紹介しますので、ぜひご利用ください。

最近はGoogle Fontsを使用することの方が多いと思いますが、デザイン上ローカルにインストールされているフォントを使用したい場合もあると思います。今回はそんなときの対処法をご説明いたします！

テーマフォルダ内にフォントをダウンロードする

まずは使用したいフォントをローカルのテーマフォルダ内にダウンロードしましょう。
今回は “Lemon Milk” というフォントを使用します。
Lemon Milkのフォントダウンロードはこちらから

テーマフォルダ内にfontsのフォルダを作成して、フォント一覧をダウンロードします。

CSSでWebフォントとして使用可能にする

ローカルにインストールされているフォントをWebフォントとして使用するには、CSSで@font-faceの指定が必要となります。
下記のCSSをご覧ください。

See the Pen Untitled by Ayaka Nakamoto (@ayknkmt) on CodePen.

@font-faceとはCSSのアットツールで、テキストを表示するための独自フォントを指定するセレクタです。
基本構文はfont-familyプロパティで使用したいフォント名を使用し、srcプロパティでファイルのリンクを指定します。

@font-faceで指定する際は、font-familyで指定したいフォント名以外を入れないように注意してください。いつも通り複数のフォントを指定すると反映されなくなります。（私はこれでだいぶ苦戦しました…）

×　font-family:’Lemon/Milk’,sans-serif;
〇　font-family:’Lemon/Milk’;

 

また、フォントのリソースがどの形式であるかを指定する必要があります。
利用可能な形式は “woff”, “woff2”, “truetype”, “opentype”, “embedded-opentype”, “svg” です。

くわしくはこちらをご覧ください。

 

@font-faceが指定できれば、あとはいつも通り指定したい場所にfont-familyで指定するだけです。その際は他のフォントを一緒に指定することも可能です。

ローカルフォントの使用方法は以上となります。
やり方さえわかれば意外と簡単に使用することができます。

おすすめの無料フォント

１、Muller

シンプルでモダンなデザインのWebサイトに合いそうな美しいフォントです。
有料でも配布されていますが、一部無料で利用できます。

２、BEBAS NEUE

幅が細めなすっきりとした印象のフォントです。
シャープでかっこいいデザインに合いそうです。

３、MANIFESTO

こちらは印象的でユニークなフォントなので、キャッチコピーやタイトルなどに使用するときにとても便利です。

さいごに

いかがでしたでしょうか？

Google Fontsにはないフォントを使用することができるとデザインの幅が広がりますね。
ちょっと変わったフォントを使用したい際などにぜひご利用ください。