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

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

関連記事

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

  VEGAS BACKGROUND SLIDESHOWの使い方   画像だけを利用した基本的な使い方   独自で作成したjsファイルがあるならそちらに以下のコードを記述 …

cssのcolumnでフロントページにランダム表示

CSSのcolumnでフロントページにランダム表示

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …

秒後に切り替わる

WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示

【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …

cmsとは

CMSとは

  CMSとは、コンテンツマネジメントシステム(content management system)の略で、簡単にいうと、ソフトの管理画面からテキストや画像などをHTMLが詳しくない方でも、 …

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …