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

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

関連記事

子テーマ functions.php

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

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

slick

IEでスライダーslickのフェードはチカチカする

  fade:trueはやめたほうがいい WordPressに導入するのに、とても使い勝手がいいjQueryの【slick】なんですが、オプションでフェードを選択するとIEでは、隠れていた部 …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …

きれいに拡大したい

小さい画像をきれいに拡大する

  小さい画像(写真)をホームページのデザインに合わせて、きれいに大きくしたい時に役立つwebサービスが『waifu2x-multi』   普通に拡大してしまうと、どうしても画像が …

お問い合わせ

WordPressにお問い合わせフォームを入れるならこの2つのどちらか

  お問い合わせフォームのプラグイン WordPressでWebサイトを作成していて、お問い合わせフォームを設置することがあると思いますが、そんな時はプラグインを使うと簡単に設置・導入が可能 …