[意外と簡単] 日本語Webフォントを自作する方法 写真付き5ステップで解説!

2020年6月19日

駆け出しのWeb開発者向けです!

本記事では、別のフォントに置き換わったり文字化けしてしまう通常フォントを、全ての端末上で同じように表示できるWebフォントに変換する方法を説明していきます😄

記事の目的:非WebフォントをWebフォントに変換する

Webフォントとは

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Wikipediaより

簡単に言うとWebフォントとは、どの端末でも同じように表示されるフォントのことです。

対して非Webフォントの場合、Webページを閲覧する端末にインストールされているフォントしか表示させることができません。

家のパソコンと会社/学校のパソコンで、同じサイト見てるのにフォントが違う、みたいな経験ないでしょうか🤔

というのは、

非WebフォントはPC等端末上からデータを読み込むため、端末ごとに表示が変わるのに対し、

Webフォントではサーバーからデータを読み込むため、どの端末にも共通のフォントを表示させることが出来るのです。

早速見ていきましょう😄

作業の流れ

「通常のフォントをWebフォントに変換する」というのが今回の作業内容になります。

全体の流れは以下です。

  1. フォントのダウンロード(今回はキユマヤ園さんの数式フォントを使用)
  2. フォントのサブセット化(サブセットフォントメーカーを使用)
  3. フォントをwoff形式に変換(WOFFコンバータを使用)
  4. サーバーにアップロード(FTPクライアントソフトが必要)
  5. 子テーマのCSSに記述

  

最初に、

必要なもの
  • サブセットフォントメーカー
  • WOFFコンバータ
  • サーバーにアップロードする環境(FTPクライアントソフト)
  • が必要になるのでインストールを済ませておいてください。

    🌾FTPクライアントソフトの設定がまだの方は、FileZillaの使い方を参考にどうぞ😺

    1.フォントのダウンロード、ライセンス確認

    まずは使いたいフォントをダウンロードし、ライセンスを確認します。

    ライセンスはフォントのサイトに載っていたり、ダウンロードしたファイル中に入っていたりするのでよく確認してみてください。

    2.フォントのサブセット化=軽くする

    サブセット化とはWebフォントに変換したい文字だけを抜き出すことです。

    これをすると容量が軽くなり、表示速度が遅くなるのを防げます。

    サブセット化は必須ではないけど、容量を軽く&サクサク動かすためにした方が良いよ!

    まずはサブセットフォントメーカーをインストール&起動。

    起動時の画面がこちら。

    上から順に解説します。

    作成元フォントファイル

    「参照」から先ほどダウンロードしたフォントのttfファイルを選択。

    作成後フォントファイル

    変換後のファイル名と収納場所の決定。「Downloads」とかが分かりやすくて良いと思います。

    今回は

    • ユーザー:自分
    • 収納場所:「Downloads」内の「2019_sushiki1.3」というファイル内
    • 名前:「WebsushikiFont」

    にしたので、

    「WebsushikiFont.ttf」というファイル名で、「Downloads」の中の「2019_sushiki1.3」に出力されます。

    フォントに格納する文字

    Webフォントに変換する文字の決定。

    変換したい文字をコピペします。

    多くても、かなやローマ字、記号に加えて、第一水準漢字くらいで良いと思います。

    作成後、WOFFコンバータを起動する

    チェックを入れます。

    作成開始!

    3.フォントをwoff形式に変換=Webフォント化

    これが所謂「Webフォントへの変換」です。

    上記の作業が終わると、勝手にWOFFコンバータが起動すると思います。

    「変換前ファイル」はいじらなくでOK。

    「WOFF2を作成する」にチェックを入れて、「変換開始」をクリック。

    これで新しいWebフォント、「WebsusgikiFont.woff」と「WebsushikiFont.woff2」の完成です😄

    woffファイル、woff2ファイルが出来ていればOK!

    4.サーバーにアップロード

    ここでFTPクライアントソフトを使います。

    自身のFTPクライアントソフト内の好きな場所に、「WebsusgikiFont.woff」と「WebsushikiFont.woff2」をアップロードします。

    ファイルをクリックして、アップロード先のフォルダにドラッグ&ドロップでアップロードすることが出来ます。

    左から選んで→右へドラッグ&ドロップ

    私は子テーマのfontsフォルダ内に入れました。

    5.子テーマのCSSに記述

    子テーマのCSSは、

    「ダッシュボード」→「テーマ名」→「子テーマの編集」から可能です。

    こんな感じで記述します。

    /*フォントの指定*/
    @font-face {
    	font-family: 'フォント名';
    	src: url('フォントのパス') format('フォントのファイル形式')
    }
    /*フォントの呼び出し*/
    h1{
    	font-family:'フォント名';
    }
    

    以下、私の実際の記述です。こんな風にするとwoff2、woff、ttfの順で表示できるファイル形式のフォントを表示することが可能です。

    @font-face {
    	font-family: "WebsushikiFont";
    	src: url('/wp-content/themes/luxech/webfonts/WebsushikiFont.woff2') format('woff2'),
    	url('/wp-content/themes/luxech/webfonts/WebsushikiFont.woff') format('woff'),
    	url('/wp-content/themes/luxech/webfonts/WebsushikiFont.ttf') format('truetype');
    }
    h1{
    	font-family:WebsushikiFont;
    }
    

    面倒なことは避けたい人へ

    ここまで読んだけどやっぱり面倒くさそうと思った方、

    Google Fontsにはすぐに使えるWebフォントが沢山あります。その中から選べば以下の作業をしなくて済みます笑

    ただ、どうしても使いたい通常フォントをWebフォントに変換したい場合、ここで紹介している方法はとても便利です。

    まとめ

    以上!

    最後にまとめます。

    1. フォントのダウンロード
    2. フォントの軽量化
    3. フォントをWebフォントファイルに変換
    4. できたフォントをサーバーにアップロード
    5. 子テーマのCSSに記述

    それでは良いディベロッパーライフを😄