wordpress

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

投稿日:

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」に対応することができました。
 



-wordpress
-, , , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …

アイキャッチ画像をPCとスマホ

アイキャッチ画像をPCとスマホで見え方を変える

  WordPressを使っていて、固定ページにもアイキャッチ画像を設定するところがあります。 そのアイキャッチ画像をページのヘッダーあたりに表示させたいと思いました。 PCでは、希望通りの …

vegas2

WordPressで画像をかっこよく見せるVEGAS

  WordPressで画像をかっこよく見せる ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与え …

ワードプレス

All in One SEO Packで XMLサイトマップをGoogleに 送信する方法

  ワードプレスのプラグインで超有名な『All in One SEO Pack』ですが、必ず入れたいプラグインの1つです。 その名前の通り、SEO関係の機能が一つにまとまっているので、かなり …

表示件数

意外と忘れていた表示件数

  アーカイブの表示件数   WordPressのテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …