WEBフォントで必要な文字だけ抽出する方法

みんな大好きWEBフォント。でも使いすぎるとWEBページの表示が遅くなり少し不満でした。

そこでWEBフォントとして使用する文字だけ抽出することにします。

ちなみに今回は、windows環境です。

目次

まずはWEBフォントの使い方からおさらいです。

WEBフォントとして利用したいフォントをサーバーにUPします。

ここでは、font.ttfをWEBフォントにしたいフォントとします。

サーバーにUPしたら、CSSでfontとして登録させます。

@font-face {
    font-family: 'myfont';
    src: url('~/myfont.ttf');
}

登録したらあとは使いたい場所に指定します。

このサイトだと、左上のロゴと、続きを読むの部分にWEBフォントを使用しています。

この場合は、下記のようにして使います。

#site-title a,.more-link{
	font-family: 'myfont';
}

これで完成です。

でもこのままだと、使わない文字も読み込んでいるため、初回訪問者が来訪した場合、WEBフォントの部分が遅くなります。

WEBフォントで必要な文字だけ抽出します。

まずは、フォントをPCにインストールします。

次に、ワードを開いて対象の文字を打ち込みます。

ワードに打ち込む

WEBフォントとして使いたい文字に変更します。

使いたいフォントに変更

別名で保存でXPSとして保存。

別名で保存でXPSとして保存

保存したファイルの拡張子.xpsを、zipに変更します。

この方法は以前記載した、ワードファイルからイメージファイルを抽出と同じです。

WEBFONT4

WEBFONT5

zipファイルの中から、Resourcesフォルダを開き、ODTTFファイルを出します。

ResourcesからODTTFファイルを出します。

19987A1A-4F8E-068C-6054-2A5AEB637A7A.odttfに長くなっているファイルを取り出します。

dttfファイルを取り出す。

このファイルのままだと難読化されているので、可読化します。

やり方は、以下のサイトに記載されいますが、難しい場合はOD2TTFというフリーソフトがあります。

https://www.kanazawa-net.ne.jp/~pmansato/xps/xps_odttf.htm

OD2TTFの使い方

ここにドラッグドロップ

上記の・・・の部分に 19987A1A-4F8E-068C-6054-2A5AEB637A7A.odttf ファイルをドラッグ・ドロップすればGUIDも自動で入力されます。手で入れる場合は赤字の文字列を入力します。

Exportを押して、ファイルに任意の名前をつけて、サーバーにUPすれば完了です!

これで、13Mとかあるフォントファイルも、数百キロバイトにシェイプされWEBの表示も快適になります。

参考にさせて頂いたサイト

あわせて読みたい
OD2TTF?̏ڍ׏?? : Vector ?¥?t?g??T???I ODTTF?t?@?C????TTF?t?@?C???ɕϊ?????
https://www.kanazawa-net.ne.jp/~pmansato/xps/xps_odttf.htm
あわせて読みたい

設定周りで悩んだら、お気軽にご相談ください。
問合せの際は「web担当者を見た」とお伝えください。

この記事を書いた人

デジタルマーケティングに16年間従事しているMITSUIです。Google AnalyticsとGoogle Tag Managerが大好きで、これらのツールを活用した情報提供を行っています。ブログではデジタルマーケティングに関する情報や最新のトレンド、ベストプラクティスを紹介しています。

コメント

コメントする

CAPTCHA


目次