bloggerでGoogle fontsを使いたい

Jさん

最近Bloggerを使っていますが、タイトルのフォントにWEBフォント（Google fonts）を使用したいと思い、色々やってましたが、単純にGoogle fontsを使うのにも少し苦労したので備忘録がてらに。

まずはGoogle fontsへアクセス。ずらーっとたくさんフォントが並んでいますので、使いたいフォントを探します。すでにお目当てのフォント名がわかっている場合は、左上の「search fonts」から一発で検索できます。

お目当てが見つかったら、大きく表示されているフォントの画像をクリック。

画像1

クリックするとそのフォントのstyleが表示されます。１つだけの場合や、この画像のようにいくつかの種類が表示されるケースもあります（主にフォントの太さなど）。使いたいstyleのフォントのselect this styleをクリック。

画像2

選択するとselect this styleの左のアイコンが＋から−に変わりますが、画面上はなにも変わっていないように見えます。ここで、画面右上のアイコンをクリックしてください。サイドバーに該当するフォントのコードが表示されます

画像3

以下の通り。

画像4

上の枠に表示されるlinkタグは<head></head>内へ、下の枠に表示されるCSSは、修正したいclassやIDに追加するなり差し替えるなりします。

ここまでが、一般的になGoogle fontsの利用方法ですが、Bloggerで使用するには、さらにいくつかのカスタマイズが必要になります。

ひとまず、blogger管理画面のテーマ→カスタマイズ→HTMLの編集へと進みます。

画像5

初めて編集される方は、必ずバックアップを取るようにしましょう。いつのまにかぐちゃぐちゃになって途方にくれることになります。

画像6

さて、この後実際にHTMLの編集に入るのですが、Bloggerテンプレートはxmlで作られていますので、Google fontsで吐き出されるコードそのままでは利用できません。同じGoogleサービスなのだから自動で変換してくれればよいのに……という愚痴は心に留めておきましょう。

先程吐き出されたコードは、以下ですが、Google fontsをBloggerで使用する際の具体的な変更点だけを挙げますと、

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@500;700&family=Roboto:wght@100&display=swap" rel="stylesheet">

・ダブルクウォート（"）を全てシングルクウォート（'）に

・＆　は　$amp;　に

・３つのコード全ての末尾にバックスラッシュ（/）　を追加

・crossoriginは　crossorigin='anonymous'に変更

という処理を行います。変更後のコードが以下。これをHTML編集画面から、テーマの<head></head>内のどこかに挿入してください。

<link rel='preconnect' href='https://fonts.googleapis.com'/>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin='anonymous'/>
<link href='https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@500;700&amp;family=Roboto:wght@100&display=swap' rel='stylesheet'/>

保存した際にエラーが出る場合は、修正漏れが発生していますので、その行をよく目を凝らして確認してください。なお、この３つのコードのうち上２つは、おそらくGoogle Fontsを利用する場合、全て共通のようなので（少なくとも僕が試したものは全て同じでしたが、違ったらご指摘を）、色々試す場合は、３つ目だけを差し替えればOKです。

あとは、CSSを該当する箇所に追加、差し替えなど行うのみです。

font-family: 'Big Shoulders Inline Text', cursive;
font-family: 'Roboto', sans-serif;

実際に吐き出されたコードはこれなので、変更したいIDやclassを探してご自由に。

ということで、BloggerでGoogle fontsを使用する場合の手順でした。


​

この記事が気に入ったらサポートをしてみませんか？