Google FontsがEdgeで表示されない場合

投稿日：2020年9月15日

Google FontがEdgeで表示されない

<link>で読み込んだのにEdgeで正しく表示されない

<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">

他のブラウザやスマホでは正しく表示されていて安心していたのですが、

ふと「Edge」で確認したところ全然効いていない！

これはまずい！

全部統一して欲しい( ﾉД`)ｼｸｼｸ…

それなら、WOFF (Web Open Font Format) を利用するしかないかな？

Google Fontsから使用するフォントをダウンロード

以下URLから使用するフォントを確認します。

https://fonts.google.com/

例として今回は「Pathway Gothic One」というフォントで説明します。

Pathway

希望するフォントが表示されたら「Download」をクリックして保存します。

ダウンロードフォント

ダウンロードしたzipファイルを解凍します。

zip解凍

上記の解凍されたファイルを見ると、TrueTypeフォントが入っています。

TrueTypeをWOFFに変換します。

変換するのに必要な「WOFFコンバータ」を使います。

ダウンロードしてインストールします。

インストール方法などは簡単だと思いますので省略します。

立ち上げると以下のような画面が表示されます。

woffコンバータ

「参照」から先ほどダウンロードした「pathwayGothicOne-Regular」を選択します。

※今回のGoogle Fonts「pathway Gothic One」は、種類がレギュラーのみになっていましたので、問題ないのですが、

font-weightがboldや500,800があり、使用したい場合は、そのファイルごとに変換します。

変換されたファイルは、以下のように追加されています。

woffフォント

Google Fontsをcssファイルに記述

その前に、先ほどの「pathwayGothicOne-Regular.woff」ファイルを、

FTPソフトなどを利用して、wordpressならテーマファイルなどの場所に「font」などの名前でフォルダを作ってその中にファイルをアップロードしてください。

css

@font-face {
font-family: 'Pathway Gothic One', sans-serif;
font-style: normal;
font-weight: 400;
src: url('https://△△△/wp-content/themes/◇◇◇/font/PathwayGothicOne-Regular.woff') format('woff'),
}

h2{
font-family: 'Pathway Gothic One', sans-serif;
font-weight:400;
}

以上で「Edge」に対応することができました。

執筆者：web