【Rails】Google Fontsについて

Posted at 2025-07-06

記事概要

Google Fontsを使用する方法について、まとめる。

Google Fontsとは

Webフォントの１つ

Webフォント

ユーザーがブラウザでサイトを表示した際に、フォントのデザインデータをインターネット上から自動で読み込む仕組み

Webフォントが開発される前は、サイト制作者がブラウザに表示させるフォントを指定していたとしても、ユーザーのパソコンにそのフォントがインストールされていなければ別のフォントで表示されてしまうという課題があった

Webフォントを使用すれば、ユーザーがインストール作業を行わなくても、制作者が意図した通りのフォントを表示させることができる

手順

Google Fontsのサイトにアクセスする
フォント一覧から、フォントを選択する
使用したいフォントの太さや字体を選択する
「Get font」をクリックする
「Get embed code」をクリックすると、使用するコードが表示される

HTMLをapplication.html.erbのタグ内に貼り付ける

<!DOCTYPE html>
<html>
  <head>
    <title>FirstApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- 追加 -->
    <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=Open+Sans:wght@300&display=swap" rel="stylesheet">
    <!-- 追加 -->
    
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

フォントを使用したい箇所のCSS設定する
style.css
```
.hoge {
  font-family: 'Open Sans', sans-serif;
}
```

参考記事

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up