http://kizineko.com/wp-content/uploads/2023/04/tracking.png

【2023】簡単!フォントをWebフォント化する方法とツール

【2023】簡単!フォントをWebフォント化する方法とツール

フォントをWebフォント化してサイトを高速化する

Webフォントはサイズが大きく、かつ外部サーバから読み込む為、読み込みに時間がかかりサイトスピードを低下させる原因の一つです。

そこでWebフォントを自分のサーバへ配置し、そこから読み込ませることによりサイトスピードの向上を測ります。

手順

※フォントはWebフォント化して良いライセンスとそうで無いライセンスがある為、事前にWebフォント化したいフォントのライセンス情報を確認してください

①フォントをサブセット化する

サブセット化→使用しない文字や漢字を取り除き、ファイルをコンパクト・軽量化にします。

サブセットフォントメーカー

こちらのソフトでフォントのサブセット化を行うことができます。必要無い方は飛ばして大丈夫です。

【2023】簡単!フォントをWebフォント化する方法とツール
【2023】簡単!フォントをWebフォント化する方法とツール
フォントをWebフォント化してサイトを高速化する Webフォントはサイズが大きく、かつ外部サーバから読み込む為、読み込みに時間がかかりサイト…

②サブセット化したフォントをWOFF形式に変換

現状フォントファイルはotf、ttf形式かと思いますが、これらはパソコン上でインストールして表示するローカルの形式のため、Web上で表示する為のwoff、woff2ファイルに変換します。

woff、woff2の他、.eot形式もありますがIE4~IE9以下に対応する場合の形式なのでwoff、woff2のみで良いかと思います。

オンラインでWOFF形式に変換できるツール

③サーバにアップ、スタイルでfontfamilyを設定

/assets/fonts/フォント名-太さ.woff、/assets/fonts/フォント名-太さ.woff2

のような名前でフォントファイルをサイトファイル内に格納し、style.cssにフォントを読み込む記述を追加します。url等は適宜変えてください。

@font-face {
font-family: "font1";
src: url("../fonts/font1-regular.woff2") format("woff2"),
url("../fonts/font1-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "font1";
src: url("../fonts/font1-bold.woff2") format("woff2"),
url("../fonts/font1-bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "font2";
src: url("../fonts/font2_regular.woff2") format("woff2"),
url("../fonts/font2_regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}

こんな漢字で読み込みたいフォントと太さ分@font-faceをstyle.cssに記述してください。

body, html { font-family: 'font1', sans-serif;
font-weight: normal;
}

body,htmlへさっき追加したフォントをfont-familyに設定すると、サイト全体にフォントが適用されるかと思います。

ホームページ、Webサイト制作なら

ホームページ制作(HP)、ランディングページ制作(LP)、WordPressサイト構築、その他バナー制作やデザイン制作などWebやデザインに関することならKizinekoにお任せください。貴社のビジネスの集客に貢献できるサイト制作を行います。

簡単見積もりフォームはこちら

SNSでシェア

コメントする

コメントは受け付けていません。

関連記事