初心者向け!写真入り5ステップで説明 日本語Webフォントの作り方

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

かわいいフォントを見つけました♡

でも、端末によっては正しく表示されない😱

だけどどうしてもこのフォントを使いたい!

という経験をしたことはありませんか?

そこで!

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

この方法を使うと、どんなフォントも文字化けせず正しく表示させられるようになるよ!

Webフォントとは

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

Wikipediaより

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

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

WindowsからMacに変えた時、同じサイト見てるのにフォントが違う、みたいな経験ないでしょうか(私だけかも🤔)

つまり、

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

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

ということで、早速実践いきましょう😄

作業の流れ

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

全体としては

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

という流れでいきます!

が必要になるのでインストールを済ませておいてください。

🌾FTPクライアントソフトの設定がまだの方は、FileZillaの使い方を参考に済ませておいてください😺

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

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

フォントのサブセット化

サブセット化とはWebフォントに変換したい文字だけを抜き出すことです。これをすると容量が軽くなり、表示速度が遅くなるのを防げます。

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

上から順にいきます!

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

💡「作成後フォントファイル」では変換後のファイル名と収納場所を決めます。

今回は

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

にしたので、

「WebsushikiFont.ttf」

というファイル名で

「Downloads」の中の「2019_sushiki1.3」

に出力されます。

💡「フォントに格納する文字」でWebフォントに変換する文字を決めます。

ひらがなカタカナローマ字記号、第一水準漢字くらいで良いと思います。

💡「作成後、WOFFコンバータを起動する」にチェック。

作成開始!

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

フォントをwoff形式に変換

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

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

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

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

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

サーバーにアップロード

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

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

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

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

子テーマのCSSに記述

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

css

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

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

CSS

@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とかを使っている方も多いかと思います。ただ、どうしても使いたい通常フォントがある時などとっても便利な方法だと思うので是非、試してみてくださいね〜