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

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

関連記事

google アナリティクス

GoogleアナリティクスをWordPressに導入設置

  自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …

レスポンシブWordPressテーマ

プロが選ぶWordPressテーマテンプレート無料有料

レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …

カスタムスクロールバー

スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

  WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …

画像を順番に表示

画像を順番に重ねて表示

  画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。   今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示した …

子テーマ functions.php

WordPress 子テーマのcssを読み込む

  親テーマのスタイルシート【style.css】の上部には、各テーマによって若干違いはあるが、以下のような記述があると思います。 @charset “UTF-8”; /*——— …