Bloggerではデフォルトのフォントだけでなく、Google FontsなどのWebフォントを使うことで、ブログのデザインをよりおしゃれにできます。
しかし、BloggerのHTMLテンプレートはXML形式なので、Google Fontsのコードをそのまま貼るだけではエラーになることもあります。
さらに、Webフォントを多用するとページ読み込み速度に影響が出る場合があります。今回は、初心者でも安心して導入できる手順と、速度面の注意点も解説します。
Google Fontsの選び方
- Google Fontsにアクセス
- 使いたいフォントを検索・選択
- 右上の「Get font」を選択
- 右上の「Get embed code」をクリックして、コードを取得
Blogger用に修正するポイント
Google Fontsのコード例：
<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=Fira+Sans:ital,wght@0,100;・・・900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
Bloggerでは以下のように修正してください：
<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=Fira+Sans:ital,wght@0,100;・・・900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap' rel='stylesheet'>
修正ポイント
- ダブルクォート → シングルクォート
- & → &
- 各タグ末尾に /を追加
- crossorigin → crossorigin='anonymous'
このコードを テーマ編集 → HTML編集 → <head> 内 に貼り付けます。
CSSに適用
取得したフォントをCSSで指定します。
/* タイトルに適用 */
h1, h2, .post-title {
font-family: "Fira Sans", sans-serif;
}
/* 本文に適用 */
.post-body {
font-family: "Fira Sans", sans-serif;
}
- font-family にGoogle Fontsで取得したフォント名を指定
- 複数フォントを使う場合はカンマで区切ることも可能
⚠ 速度面の注意点
- フォントを大量に読み込むとページの表示速度が遅くなることがあります
- 特に 多種類・多ウェイト（太さ）・多スタイル（斜体など） を一度に読み込む場合は要注意
- 表示速度が遅いとSEO評価や読者の離脱率にも影響する可能性があります
- おすすめ
- 使用するフォントは必要最小限にする
- 太さやスタイルもよく使うものだけを選ぶ
- display=swap オプションを利用して、フォント読み込み中でもテキストが表示されるようにする
まとめ
BloggerでもGoogle Fontsを導入することで、ブログの見た目を簡単におしゃれにできます。
ただし、フォントの種類やスタイルを過度に増やすと表示速度に影響するので、必要最低限に抑えることが重要です。
今回紹介した手順を守れば、初心者でも安全に導入可能です。
コメントを投稿