ローカルにインストールされているフォントをWEBフォントとして使う方法【簡単】

おはようございます！社員Aです👩

今回は、ローカルにインストールされているフォントをWEBフォントとして使う方法をご紹介したいと思います。

以前の記事で、簡単に導入できるGoogle Fontsをご紹介しましたが、デザイン上ローカルにインストールされているフォントをWEBフォントとして使いたい場合もあると思います。今回はそんなときの対応方法について説明していきます！

Webフォントを使用可能にする@font-face

ローカルにインストールされているフォントをWEBフォントとして使用可能にするには、CSSの＠font-faceを使用します。

下記の記述で、font-family にフォント名として指定することが出来ます。

@font-face {
    font-family: 'min';
    src: url('/font/min.eot?') format('oldIE'),
        url('/font/min.woff') format('woff'),
        url('/font/min.ttf') format('truetype');
}
.min{
    font-family: 'min';
}

例えば上記では、ドメイン直下にアップロードしている「min」というフォントを「min」という名前のfont-familyで定義しています。

WEBフォントとして使用可能にするには「＠font-face」を使うということがわかりましたので、次の項目からは実際の手順を追って説明していきたいと思います。

ローカルにインストールされているフォントをWEBフォントとして使う方法

1.WEBフォントとして使いたいフォントを準備する

まずは、フォントを準備しましょう。日本語でも英語でも構いませんが、フォントの著作権や使用権利などは必ず事前に確認しておきましょう。

基本的には、下記の3つのフォントを準備します。

1. ttf拡張子の「.ttf」
2. IE用の拡張子「.eot」
3. woff拡張子の「.woff」

1番の「.ttf」は一般的なフォントの拡張子なので、簡単に準備できるかと思いますが、IE用とwoff形式は特別な拡張子になるので、変換ソフトで変換して作成する必要があります。

2.フォント変換ソフトで3つの拡張子を作成

様々なフォント変換ソフトがあると思うのですが、前項で説明した拡張子を一気に準備できるソフトがありますので、そちらを使ってご説明していきたいと思います。

使用するフォント変換ソフトは、「WOFFコンバータ」です。

Win・Mac両方で使えるソフトですので、まずはこちらのソフトをインストールしましょう！

opentype.jp

 

64 Users

88 Pockets

WOFFコンバータ

https://opentype.jp/woffconv.htm

ソフトをインストールしたら、早速開きましょう。

ソフトを開くと「変換前ファイル」という項目があるので、こちらに元々のフォント（ttf形式）を選択します。

変換前ファイルでttfファイルを選択

続けて、「フォントをWOFFに変換する時」という項目がありますので、「EOTファイルを作成する」のみにチェックをします。

「EOTファイルを作成する」のみにチェック

変換開始をクリックし、変換する

フォントが無事変換されると、もともとのttfファイルと同じ階層に「.woff」形式と「.eot」形式のフォントが出来ているかと思います。

これで変換完了です。

3.準備ができたフォントファイルをFTPなどでアップロード

フォントの準備ができましたら、FTPソフトなどで任意の階層にアップします。

今回は、ドメイン直下の「/font/」階層にアップロードした事例で説明を続けたいと思います。

4.@font-faceを使ってフォントを読み込む

一番最初にご紹介した「@font-face」を使って、フォントを読み込み、WEBフォントとして使用します。

@font-face {
    font-family: 'min';
    src: url('/font/min.eot?') format('oldIE'),
        url('/font/min.woff') format('woff'),
        url('/font/min.ttf') format('truetype');
}
.min{
    font-family: 'min';
}

「@font-face」を使って、先程作成した「.woff」形式と「.eot」形式のフォントも読み込んでいます。

更にクラスでフォント指定すれば、要素にクラスを指定するだけでWEBフォントを適用することができますね。

まとめ

上記の手順でローカルにインストールされているフォントをWEBフォントとして使うことができます。一見面倒な作業に感じますが、慣れてくるとスムーズにWEBフォントとして読み込むことができます！

記事内にも記述した通り、フォントを使う時は必ず著作権や使用権利を確認した上でWEBフォントとして使用しても問題ないフォントを使用しましょう。

ローカルフォントをWEBフォントとして読み込むことで、コーディング上のデザインの幅も広がりますね！