Google Fonts 使い方を 初心者向けに解説、Cocoonやパソコンでの利用なども解説｜HTML＆CSS入門講座（26）のPodcast
下記のPodcastは、Geminiで作成しました。
はじめに
ウェブサイトの第一印象を左右する大きな要素の一つが「フォント（文字のデザイン）」です。文字が美しいだけで、サイト全体の信頼感や読みやすさは劇的に向上します。かつては閲覧者のパソコンに入っているフォントしか表示できないという制約がありましたが、現在は「ウェブフォント」という技術により、制作者が意図した通りの美しい文字を誰の画面でも表示できるようになりました。その中でも、Googleが提供する「Google Fonts」は、2026年現在、ウェブデザインにおいて欠かせない標準インフラとなっています 。本記事では、HTMLやCSSを学び始めたばかりの初心者の方に向けて、Google Fontsの最新の使い方から、人気WordPressテーマ「Cocoon」での設定方法、さらには自分のパソコンへのインストール方法まで、どこよりも丁寧に解説します。
Google Fontsとは？なぜ使うべきなのか
Google Fontsは、Googleが提供している数千種類もの高品質なフォントを、無料で利用できるサービスです。
2026年における重要性とメリット
以前は、日本語フォントはファイルサイズが大きいために「サイトの表示が遅くなる」と敬遠されることもありました。しかし、2026年現在のネット環境では、ブラウザの進化や「バリアブルフォント（可変フォント）」という技術の普及により、非常にスムーズに表示できるようになっています 。Google Fontsを利用する主なメリットは以下の通りです。
完全無料・商用利用OK: ほとんどが「SIL Open Font License」などのオープンソースライセンスで提供されており、個人ブログから企業の商用サイトまで安心して使えます 。
デザインの統一: Windows、Mac、iPhone、Androidなど、どの端末から見ても同じフォントで表示されます 。
最新フォントの追加: 2026年1月には、LINEヤフーのコーポレートフォント「LINE Seed JP」が追加されるなど、常に進化を続けています 。
SEOへの貢献: 文字を画像ではなくテキストとして表示できるため、検索エンジンが内容を正しく理解でき、検索順位にも良い影響を与えます 。
【2026年最新版】Google Fonts’の選び方と埋め込み手順
Google Fontsの公式サイトは、2026年に向けてより直感的な操作ができるようUI（ユーザーインターフェース）が改良されています 。最新の手順でフォントを選んでみましょう。
ステップ1：フォントを探す
公式サイトにアクセス: Google Fonts を開きます 。
日本語で絞り込む: 画面上部の「Language」プルダウンから「Japanese」を選択します。これで日本語に対応したフォントのみが表示されます 。
プレビューを確認: 「Type something」の欄に、自分のサイトの見出しなどで使いたい言葉（例：「最新のニュースをお届けします」）を入力します。実際の見え方を確認しながら選べるので非常に便利です 。
ステップ2：フォントを選択する（Get font）
気に入ったフォントを見つけたら、そのカードをクリックします。画面右上にある 「Get font」 ボタンをクリックします 。これにより、選んだフォントが「カート」のようなリストに追加されます。複数のフォントを使いたい場合は、同様に他のフォントも選んで追加できます。ただし、読み込み速度を維持するため、初心者の方は「2種類まで」に絞るのがコツです 。
ステップ3：埋め込みコードを取得する
画面右上のバッグのようなアイコンをクリックして、サイドバーを表示させます。「Embed（埋め込み）」タブを選択します。「<link>」 方式が選択されていることを確認し、表示された数行のコードをコピーします 。
HTMLとCSSへの反映方法
コピーしたコードを実際に自分のウェブサイトに適用してみましょう。
HTMLでの記述（読み込み）
HTMLファイルの `<head>` タグ内（`<title>`タグの下あたり）に、コピーしたコードを貼り付けます。
HTML
<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=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
ここで重要なのが `display=swap` という記述です。これは「フォントのダウンロードが終わるまでの間、代わりのフォントで文字を表示しておく」という設定で、画面に何も表示されない時間をなくすための必須のテクニックです 。
CSSでの記述（適用）
次に、CSSファイルでどの場所にフォントを適用するかを指定します。
CSS
/* サイト全体のフォントを指定する場合 */
body {
font-family: 'Noto Sans JP', sans-serif;
}フォント名の後に書く `sans-serif` は、万が一Google Fontsが読み込めなかった時に表示する「予備のフォント（ゴシック体）」の指定です。これを忘れないようにしましょう 。
バリアブルフォント（可変フォント）の活用
2026年のウェブデザインでは「バリアブルフォント」が標準となっています。これは、一つのフォントファイルで「細い」から「極太」までを自由に調整できる画期的な仕組みです 。以前は「Regular 400（標準）」や「Bold 700（太字）」のように、使いたい太さごとにファイルを読み込む必要がありましたが、現在は `wght@100..900` のように範囲で指定することで、`font-weight: 550;` といった絶妙な太さも表現可能になっています 。これにより、見出しのインパクトをミリ単位で調整できるようになりました。
WordPressテーマ「Cocoon」での設定方法
日本で非常に人気の高い無料テーマ「Cocoon」では、難しいコードを書かなくても簡単にGoogle Fontsを設定できます 。
手順1：標準機能で設定する（最も簡単）
1. WordPress管理画面の 「Cocoon設定」 ＞ 「全体」 タブを開きます 。
2. 「サイトフォント」という項目を探します。
3. ドロップダウンリストから、使いたいフォント（例：Noto Sans JP）を選択します 。
4. 「変更をまとめて保存」をクリックすれば完了です。
手順2：手動で最新フォント（LINE Seed JPなど）を追加する
Cocoonの標準リストにない新しいフォントを使いたい場合は、以下の手順で行います。
1. 前述のステップでGoogle Fontsから取得した `<link>` タグをコピーします。
2. 「Cocoon設定」 ＞ 「アクセス解析・認証」 タブにある 「ヘッド用コード」 欄に貼り付けます 。
3. 「外観」 ＞ 「カスタマイズ」 ＞ 「追加CSS」 に、適用したいCSS（例：`body { font-family: 'LINE Seed JP', sans-serif; }`）を記述します。
パソコン（Windows / Mac）にインストールして使う方法
ウェブデザインの資料作成や、PowerPoint、WordなどでGoogle Fontsを使いたい場合は、自分のパソコンにインストールする必要があります 。
ダウンロードの手順
1. Google Fontsの各フォントページで「Get font」をクリックします。
2. 右上のリストから 「Download all」 をクリックしてZIPファイルを保存します 。
3. ダウンロードしたZIPファイルを右クリックして「すべて展開（解凍）」します。
インストールの手順
Windows 11の場合: 解凍したフォルダ内のフォントファイル（.ttf または.otf）を右クリックし、「すべてのユーザーに対してインストール」を選択します 。
Macの場合: フォントファイルをダブルクリックすると「Font Book」アプリが開くので、「フォントをインストール」ボタンを押します 。
インストールが完了すれば、Excelやデザインツールなどのフォント一覧に名前が出てくるようになります。
2026年おすすめの日本語Google Fonts 10選
どのフォントを使うか迷ったら、以下の10種類から選んでみてください 。
Noto Sans JP: 最もスタンダードで失敗のないゴシック体です 。
Noto Serif JP: 落ち着いた上品な印象を与える明朝体です 。
LINE Seed JP: 2026年の注目株. 親しみやすく、スマホでの視認性が抜群です 。
Zen Kaku Gothic New: 現代的で洗練されたモダンなゴシック体です 。
M PLUS Rounded 1c: 丸みを帯びていて、可愛らしく柔らかい雰囲気になります 。
Shippori Mincho: 情緒的で美しい、伝統的なスタイルの明朝体です 。
Sawarabi Gothic: 極めてシンプルで、小さな文字でも潰れにくいのが特徴です 。
Kiwi Maru: 手書きのような温かみがある、個性的な丸文字です 。
Dela Gothic One: 圧倒的な太さで、タイトルやロゴに使うと強いインパクトを与えます 。
Yusei Magic: 油性マジックで書いたような遊び心のあるユニークな書体です 。
パフォーマンス（表示速度）を最適化するコツ
フォントにこだわりすぎて、サイトの表示が遅くなっては本末転倒です。以下の3点を意識しましょう。
preconnect（事前接続）を使う: Google Fontsから取得したコードに含まれる `preconnect` のタグは削除しないでください。これにより、フォントのダウンロードが始まる前にサーバーへの準備を行い、表示を高速化します 。
必要な太さだけ選ぶ: バリアブルフォントでない古いフォントを使う場合は、必要な太さ（400と700だけ、など）に絞って読み込むようにします 。
システムフォントとの併用: 2025年4月から Windows 11 に「Noto Sans JP」が標準搭載されたため、Windowsユーザーにはウェブフォントとして読み込まず、PC内のフォントを使わせる設定にすることで、より高速な表示が可能になります 。
まとめ
Google Fontsを使いこなすことは、ウェブ制作における「脱・初心者」への第一歩です。2026年現在は、単に文字を表示するだけでなく、いかに速く、いかに美しく表示させるかというパフォーマンスの視点も重要になっています。まずは「Noto Sans JP」などの王道フォントから使い始め、徐々にサイトのコンセプトに合わせて「LINE Seed JP」などの個性的なフォントに挑戦してみてください。美しい文字は、あなたの発信する情報をより魅力的に、そして深く読者に届けてくれるはずです。
参考資料
1. Google Fonts, https://fonts.google.com/
2. Google Fonts 使い方 2026年最新UI対応, https://humhum.co.jp/4931/
3. Cocoon サイトフォント設定公式マニュアル, https://wp-cocoon.com/site-font-settiongs/
4. 2026年版 日本語Webフォント最新実装ガイド, https://ics.media/entry/200317/
5. LINE Seed JP 提供開始のお知らせ, https://www.lycorp.co.jp/ja/news/release/020040/
6. Google Fonts 日本語フォント10選と特徴, https://onca.co.jp/column/design/p7599/
7. Variable fonts on Google Fonts v2 API, https://developers.google.com/fonts/docs/css2
8. 2026年におすすめの日本語フリーフォントまとめ, https://coliss.com/articles/freebies/japanese-free-fonts.html
9. Webデザインでおすすめの日本語Google Fonts 2026, https://www.sanzen-design.jp/labo/p6914
10. Webフォントの読み込みを最適化する方法, https://developer.chrome.com/docs/performance/insights/font-display
11. LINE Seed JP (Google Fonts), https://fonts.google.com/specimen/LINE+Seed+JP
12. Variable fonts support in CSS, https://intellitect.com/blog/google-variable-fonts/
13. Google Fonts 埋め込みコード取得手順 (2026), https://qiita.com/Natu_ja/items/1935c46de8dd2010f61b
14. MDN Web Docs: CSS Variable fonts, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts
15. 2026年 おすすめ 日本語 Google Fonts まとめ, https://coliss.com/articles/freebies/japanese-free-fonts.html
16. How to use variable Google Fonts, https://chipcullen.com/how-to-use-variable-google-fonts/
17. Variable Fonts - MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
18. The Best Free Fonts on Google Fonts 2026, https://www.typewolf.com/google-fonts
19. Google Fonts API v2 Documentation, https://developers.google.com/fonts/docs/css2
20. Optimizing Google Fonts Performance, https://nitropack.io/blog/optimize-google-fonts-wordpress/
21. Google Fonts パソコンへのインストール方法解説, https://blog.asobou.co.jp/bussiness/google-fonts
22. Webfont Performance Case Study, https://stackoverflow.com/questions/79779583/how-does-google-fonts-browser-optimize-their-font-preview-experience
23. Preload Web Fonts - Web.dev, https://web.dev/articles/resource-prioritization-fonts
24. Top 10 Google Fonts for Websites, https://kinsta.com/jp/blog/best-google-fonts/
25. Apple Support: Font Book User Guide, https://support.apple.com/guide/font-book/install-and-validate-fonts-fntbk1000/mac
26. WP Rocket: Optimize Google Fonts Guide, https://docs.wp-rocket.me/article/1312-optimize-google-fonts
27. Preconnect to Google Fonts for Speed, https://sia.codes/posts/making-google-fonts-faster/
28. CocoonでのWebフォントカスタマイズ手順, https://cocoon-grayish.na2-factory.com/manual-site-font/
29. Optimizing fonts for Core Web Vitals, https://talent500.com/blog/optimizing-fonts-foit-fout-font-display-strategies/
30. Cocoon設定：サイトフォントの変更方法, https://wp-cocoon.com/site-font-settiongs/
31. Google Variable Fonts API Guide, https://developers.google.com/fonts/docs/css2
32. Cocoon設定のヘッド用コードに貼り付ける手順, https://morinosato-jichi.sakura.ne.jp/chosasite/font-sonota/
33. Cocoon サイトフォント項目設定, https://wp-cocoon.com/site-font-settiongs/
34. Google Fonts から Mac に反映させる方法, https://ippo.kiroworks.com/%E3%80%90mac%E3%80%91google-fonts-%E3%82%92-mac-%E3%81%AB%E5%8F%8D%E6%98%A0%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95/
35. Cocoon 標準機能で選択可能なフォント一覧, https://wp-cocoon.com/site-font-settiongs/
36. Google Fonts 導入とライセンスの注意点, https://japan.mykajabi.com/blog/google-font-setting
37. Google Fonts パソコンへのダウンロード手順, https://qiita.com/Natu_ja/items/1935c46de8dd2010f61b
38. Mac OS font installation guide, https://setapp.com/how-to/install-fonts-on-mac
39. Controlling font performance with font displays, https://developer.chrome.com/docs/performance/insights/font-display
40. How to install fonts on Windows and Mac, https://pixelsurplus.com/blogs/blog/how-to-install-fonts-on-windows-and-mac-os
41. Google Fonts browser optimization analysis, https://stackoverflow.com/questions/79779583/how-does-google-fonts-browser-optimize-their-font-preview-experience
42. Font Book on Mac installation, https://support.apple.com/guide/font-book/install-and-validate-fonts-fntbk1000/mac
43. Windows 11 Legacy Font Support, https://learn.microsoft.com/en-au/answers/questions/5723376/installing-and-using-legacy-fonts-on-windows-11-ap
44. Microsoft Support: Add a font to Windows, https://support.microsoft.com/en-us/office/add-a-font-b7c5f17c-4426-4b53-967f-455339c564c1
45. Web font optimization best practices 2026, https://typetype.org/blog/web-font-optimization-the-key-to-instant-website-loading-speed/
コメント