More than 3 years have passed since last update.

Rails Googleフォント使い方（初心者）

Posted at 2021-12-14

#Google Fontとは
Googleが提供するWebフォントのサービスです。
基本無料で使用できます。
下記GoogleフォントのURL

###Webフォントとは
Webフォントはネットワーク上からフォントデータを読み込みWebサイトやブログに表示する仕組みを利用しています。
異なるデバイスで見ても意図したWebフォントを表示することが可能。
##実装の手順
①使いたいGoogleフォントを探す（　link　と　CSS rules to specify familiesをコピー）
②app/views/layouts/application.html.erb　のheadの中にlinkを貼り付ける
③app/assets/stylesheets 内にある使いたいscssにCSS rules to specify familiesを貼り付ける

###①

上画像Googleフォントのページです
ここから使いたいフォントを選びます

選んでみました。

右下の方にあるselect this style を押します

押すとこのように"link"と"CSS rules to specify families" が表示されます
この２つが必要になります。

注意
ページを翻訳するとコピーする内容も翻訳される場合があります。

###②

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

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <link rel="preconnect" href="https://fonts.googleapis.com"> #headの中に先ほどコピーしたリンクを差し込む
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>　 #同じく
    <link href="https://fonts.googleapis.com/css2? family=Kaisei+Decol:wght@500&display=swap" rel="stylesheet"> #同じく
  </head>

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

###③

.title {
  font-family: 'Kaisei Decol', serif; #コピーしたCSS rules to specify families
}

##なぜこの記事を書いたか
今、初めてオリジナルでアプリを作っています。
その中でGoogleFontを使うのに時間がかかってしまったので
1ページでわかりやすい記事を書いてみようと挑戦してみました。
他にもGoogleFontの使い方は多数あるので、追記して出来るだけわかりやすいページに仕上げていきたいと思います。

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

Rails Googleフォント 使い方（初心者）

Rails Googleフォント使い方（初心者）