googlefontの読み込み、表示について質問です。

Question

googlefontの読み込みが遅いので、フォントをダウンロードして自身の
サーバーに設置したいのですが、うまくいきません。
不備等ございましたら、教えていただけないでしょうか。
よろしくお願いします。

・ダウンロードしたフォント複数あります。
・<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,500,700&display=swap&subset=japanese" rel="stylesheet">
↑こちらがグーグルフォント設定コードですが、読み込みが遅いのでフォントを直接
読み込ませたいです。

・参考にしたサイト
https://nelog.jp/download-google-fonts

@font-face { 
    font-family: 'M PLUS Rounded 1c';
    src: url('../fonts/MPLUSRounded1c-Thin.ttf') format("ttf");
    src: url('../fonts/MPLUSRounded1c-Black.ttf') format("ttf");
    src: url('../fonts/MPLUSRounded1c-Bold.ttf') format("ttf");
    src: url('../fonts/MPLUSRounded1c-ExtraBold.ttf') format("ttf");
    src: url('../fonts/MPLUSRounded1c-Light.ttf') format("ttf");
    src: url('../fonts/MPLUSRounded1c-Medium.ttf') format("ttf");
    src: url('../fonts/MPLUSRounded1c-Regular.ttf') format("ttf");
    src: url('../fonts/glyphicons-halflings-regular.ttf') format("ttf");

 }

body { 
    padding-top: 55px;
    font-family: 'M PLUS Rounded 1c';
    font-size:16px;
    
 }

Comments

[masshu]

formatの()内をtruetypeにしてもダメな感じですか？

こちらの下の方参考で↓
https://thinkit.co.jp/story/2011/08/18/2233

[x_x]

実際に出力される CSS を見て作ったほうがいいのでは？
https://fonts.googleapis.com/css?family=M%20PLUS%20Rounded%201c

[momori]

ありがとうございます。以下書き直してみましたが、うまくいかないようです。
src: url('../fonts/MPLUSRounded1c-Thin.ttf') format("truetype");

[yoshinavi]

font-weightの指定はどこで行いますか？
セミコロンの位置等、@font-faceの記述の見直しが必要かと思います。

Answer 1

googlefontの読み込みが遅いので、フォントをダウンロードして自身の

サーバーに設置したいのですが、うまくいきません。

根本的な疑問ですが、そのサーバは本当にGoogleより速いのでしょうか？（GoogleはCDNなどを活用して、徹底的にチューニングしているものと思われます）

「フォントファイル自体が巨大で、自分がネット接続している回線の速度で引っかかっている」という場合、どんなサーバにしても回線速度の限界は乗り越えられません。

Comments

[maisumakun]

勝つ方法があるとするならば「ローカル環境でローカルサーバ自身から配信する」か、「フォントをサブセット化して容量を減らす」ぐらいでしょう。

[yoshinavi]

状況にも寄るのでしょうが、例えば「font-display: swap;」を設定するにはCDNでは対応しないので、そのあたりに、質問者さんの考えがあるのかもです。

[karamarimo]

つい数日前にGoogle FontのCDNでfont-displayを指定できるようになりましたよ。
https://twitter.com/googlefonts/status/1130542400131293185

[yoshinavi]

karamarimoさん

情報ありがとうございます。勉強になります。

[momori]

ありがとうございます。「Firefox」で表示時に読み込みが遅くちらつくのが気になっていました。
使用してるフォントが多いんですよね。

Answer 2

日本語フォントで3ウエイトとなると相当重くなるので、本当に3ウエイト必要なのか、見出しだけではダメなのか検討する必要があると思います。

どうしても3ウエイト必要な場合は、サブセット化やOpenType情報の除去などしてファイルサイズをピーキーに削る必要があるかと。

Answer 3

原因分かりました???? これでいけまする????????

• 分かりやすさのため、以下のCSSは ウェイトを400, 700 に限定しています。他ウェイトも同じ要領でいけます。

@font-face {
   font-family: 'M PLUS Rounded 1c';
   src:  url('../fonts/MPLUSRounded1c-Regular.ttf') format("truetype"); /* !! */
   font-weight: 400; /* !! */
}
@font-face {
   font-family: 'M PLUS Rounded 1c';
   src:  url('../fonts/MPLUSRounded1c-Bold.ttf') format("truetype");
   font-weight: 700;
}
body {
   padding-top: 55px;
   font-family: 'M PLUS Rounded 1c';
   font-size: 30px;  /* 判別がしやすいよう */
   font-weight: 700; /* 30px, ウェイト700 にしてあります */
}

.ttfは、どのブラウザでもほぼいけそうですね????????

.woff, .ttf, .eotファイルのブラウザー対応表

Webfont formats -- Transfonter

おまけ

フォント名は、font-familyで自分の好きな名前に設定できます????

@font-face {
   font-family: 'Maru';
   src:  url('../fonts/MPLUSRounded1c-Regular.ttf') format("truetype");
   font-weight: 400;
}
@font-face {
   font-family: 'Maru';
   src:  url('../fonts/MPLUSRounded1c-Bold.ttf') format("truetype");
   font-weight: 700;
}
body {
   padding-top: 55px;
   font-family: 'Maru';
   font-size: 30px;
   font-weight: 700;
}

Comments

[yoshinavi]

上記に、フォントをサブセット化（使う文字が限定なら、なおさら）したうえで、出来ればttfより、woff、またはwoff2が容量が少なくなりますね。もともとがwebフォント用ですから。

Answer 4

少し調べてみたところ、tffはスマホブラウザは対応しているけど、
PCブラウザが対応してないそうなので、woffに変換して読込の追記が必要なのかも。。。

参考サイト

手元のローカル環境で試してみたところ、
google fontからダウンロードしたtffを、woffに変換して、@font-faceに、

  src: url('../fonts/MPLUSRounded1c-Regular.woff') format("woff");

こんな感じで追記したら、正しくフォントが反映されるようになった気がします。
(windows のChromeとFirefoxで確認)

※ファイル変換はこちらのサイトで行いました。

なお、Regular以外のファイルは面倒だったので、試しておりません・・^^;

Comments

[maisumakun]

TTFファイルでも（極めて古いブラウザを除けば）問題なくWebフォントとして適用可能かと思います・

https://caniuse.com/#feat=ttf

[mix-peach]

≫　maisumakunさん
なるほど？！
ご指摘受けましたので、ローカル（バーチャル）環境では何かが違うかもしれないと思いまして、サーバー（フリーのレンタルサーバー）上に置いて試してみましたが、やはり、ttfではフォントが変わらず、woffに変換した追記をすれば適用されているように見えました。。（ブラウザは、windowsの最新Chromeと最新Firefoxです）

google fontでダウンロードできるttfファイルが特殊（？）なのか、そもそも私のフォントのダウンロード方法が間違っているのか、あるいは環境に依存する何かがあるのか・・・根本原因は不明ですが、
とりあえず、もしかしたら質問者さんもこの方法で解決できるかもしれないので、ご本人に試していただくほかはなさそうです・・^^;