Home » memo » Blogger ブログタイトルにGoogleフォントを適用

Blogger ブログタイトルにGoogleフォントを適用

2 2020/08/27
このブログでは、ページトップのタイトル「nono*Note」にGoogleフォントを適用している。そのときは苦労したのに、今ではすっかりその方法を忘れてしまっているワタシ。。メモしとかなくちゃ。(^^;)
ヘッダー画像内のこれ。（↓）Googleフォントの「Rye」を使用している。

blogger タイトルにGoogleフォント適用



■BloggerでタイトルにGoogleフォントを適用する方法


- - - 目次 - - -



1. フォントを選ぶ

（１）Google Fontsのサイトを開くと、ズラズラズラ〜とフォントが並んでいる。
その中から好みのものを選ぶもよし、または、名称やスタイルで検索することもできる。

blogger タイトルにGoogleフォント適用



（２）検索フォームを利用。
私は使用するフォントが決まっていたので、検索フォームでフォント名「rye」を検索。すると3種類のフォントが現れるので、目的の「Rye」の枠をクリックする。

blogger タイトルにGoogleフォント適用



（３）フォントの個別ページが表示される。
フォントのデザインを確認し、中央右端の「+Select this style」をクリックする。

blogger タイトルにGoogleフォント適用




2. フォントのlinkタグとCSSを取得する

（１）右端に表示された「Selected family」内の「Embed」をクリックする。

blogger タイトルにGoogleフォント適用



（２）linkタグとCSSが表示されるので、それぞれをコピーする。
<link>のとなりに@importというのがあるが、こちらはHTMLはいじらずにCSSにコピペするだけでいいらしい。が、linkタグを利用する方法でいいんだって。理由はわからない。。(^^;)

blogger タイトルにGoogleフォント適用


ページTOPにもどる


3. linkタグをBlogger用に編集する

私の使用するフォント「Rye」のlinkタグはこれ。↓
<link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet">

このままテーマに貼り付けるとエラーになるので、Blogger用に編集する。

（１）青い文字部分をそれぞれ以下のように変更する。
 「"（引用符）」→「'（アポストロフィー）」
 「&」→「&amp;」

（２）さらに、最後にスラッシュ「/」を追加する。


こうなる。↓
<link href='https://fonts.googleapis.com/css2?family=Rye&amp;display=swap' rel='stylesheet' />


4. テーマを編集する

（１）テーマのバックアップを取る。（＊ここ重要＊）

（２）変更したlinkタグをテーマの<head>内に貼り付ける。

（３）フォントのCSSをブログタイトルのCSS記述のところに追加する。
私のテーマではサイトタイトルは「heder h3」である。
テーマ内の以下の箇所にCSSを追加した。こんな。↓
#header h3{
        font-family: 'Rye', cursive;
        font-size: 280%;
        line-height: 1.1;
}
#header h3 a{
        font-family: 'Rye', cursive;
        color: inherit;
}

（４）テーマをプレビューしてみて問題がなければ保存する。



上記の方法でうまくいくのだが・・・、
少し気になるところがあるので、自分好みに変更してみた。


5. 自分好みに変更


（１）display=swapを削除
Googleフォントは、webサーバー上にあるWebフォントの一種である。
かつては、それぞれのローカルのデバイスにインストールされているフォントしか表示されなかったが、現在はwebフォントを使用することで、デバイス上にはないフォントも表示することができるようになった、というわけやね。
- - - - - - - -

Googleフォントでコピーしたlinkタグの中には以下の記述がある。
display=swap

この記述の せいで おかげで、ローカルのシステム上にないフォントを読み込むとき、そのwebフォントが読み込まれるまでの間に「代替えフォント」が表示される。
もしも、何らかの原因でwebフォントが読み込めなかった場合にも、この代替えフォントが表示されることによって、その箇所が「空白」にはなることはない。
...ということなのだが、このフォントが入れ替わるときの様子が私はとてもイヤなのだ。。
（サイトが一度読み込まれれば、あとは代替えフォントは現れずスムーズにwebフォントが表示されるようだ..たぶん..）

こんなふうになる。↓


□「display=swap」がある場合。表示されるまでの間に代替えフォントが現れる。




□「display=swap」がないと、代替えフォントは現れず空白である。




ね、短時間にフォントが入れ替わる様子がキモチわるくない？
私だけかもしれないけど...私は「代替えフォント」なし、空白の方がマシだと思う。
というわけで「display=swap」の記述を削除した。

（２）必要な文字のみを読み込ませる
linkタグに「&text=nono*Note」を追加することで、無駄な読み込みがなくなり、サイトの読み込み速度にも効果がある。（らしい）

（３）linkタグにtype属性とmedia属性を追加
これは、特に理由はない。最初にGoogleフォントを使用したときにはあったので、あった方がいいような気がするだけで、実は何もわかっちゃいない。。(^^;)
「media='all'」と「type='text/css'」を追加した。

■ 最終的にlinkタグはこうなった（↓）
（あかいテキストが追加した箇所）
<link href='https://fonts.googleapis.com/css2?family=Rye&text=nono*Note' media='all' rel='stylesheet' type='text/css'/>

これでできあがり。


/ Ivan Radic
だから何なん？..というようなカスタマイズだけどね。(^^;)ｴﾍﾍ
昨日は台風の影響なのか風がビュンビュン吹いていたが、ようやく少し涼しくなってきてうれしい。
今月は、義母の付き添いで何度か病院へ行ったりしたのだが、私はいつも入り口の体温チェックでひっかかる。先週なんて老人施設なのに7度5分あって、さすがに入るわけにはいかない。。見学のために訪れているのに、いざというときにちっとも役に立たない嫁、それはワタシです。。コロナではなさそうだけど...身体が薄っぺらいから熱の影響を受けやすいとかなのかしら？？
カテゴリー : , ,