👏

rails googlefont導入仕方

2022/01/25に公開約4,700字

1.はじめに

RailsのHTML/CSSに対して、GoogleFont適用する2つの方法を学んでもらうのが
この記事のゴールだよ!

2. まずは、GoogleFontのサイトから使用するFontを選ぶ

GoogleFontのサイト
↑ ここからサイトへ飛びます

スクリーンショット 2021-11-23 18.55.54.png

そしたら上記のページに行くと思います。

この中から使用したいフォントを選択します。

今回は変化がわかりやすいように"Comforter Brusho"を使います。

スクリーンショット 2021-11-23 18.57.06.png

選んだフォントをクリックします。
そうすると、以下のようなページになると思います。

スクリーンショット 2021-11-23 18.57.34.png

そしたら、右上にある**"View your selected families"**をクリックします。

スクリーンショット 2021-11-23 18.57.18.jpeg

そうすると、以下の画像が現れると思います。

これで、GoogleFontを適応させる準備は整いました。

3. ここからはGoogleFontの導入方法を2つ紹介します。

1. application.cssを使って導入する方法からやります。

スクリーンショット 2021-11-23 19.23.36.png

上記の<link>に選択して画像でドラッグしているところをコピーします。

コピーができたら、

    <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=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap" rel="stylesheet">

これをapplication.html.erbにペーストします。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Pra</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= 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=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap" rel="stylesheet">

#ここまで

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  
</html>

これでcssfont-family指定をしてあげれば、完了です。

font-familyはgooglefontのサイトからコピペすれば大丈夫です。

スクリーンショット 2021-11-23 19.24.43.png

app/assets/stylesheets/application.css

body {
  font-family: 'Comforter Brush', cursive;
}

と記述してあげると適応されます。

2. application.scssを使って導入する方法からやります。

1つ目の導入方法と大きく違う点はscssに記述をすることです

導入方法はcssの時と違うのは@importの方をコピーします。

そうしましたら、そのコードをapplication.scssに記述します。

app/assets/stylesheets/application.scss
// /* // Place all the styles related to the tweets controller here.
// // They will automatically be included in application.css.
// // You can use Sass (SCSS) here: https://sass-lang.com/ */

#追加箇所
    
@import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap');

#ここまで

header {
  background-color: #cef0ff;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

これでscssfont-family指定をしてあげれば、完了です。

font-familyはgooglefontのサイトからコピペすれば大丈夫です。

スクリーンショット 2021-11-23 19.24.43.png

app/assets/stylesheets/application.scss
// /* // Place all the styles related to the tweets controller here.
// // They will automatically be included in application.css.
// // You can use Sass (SCSS) here: https://sass-lang.com/ */

@import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap');

header {
  background-color: #cef0ff;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Comforter Brush', cursive;
}

これで適応されます。

4.完成図

このようにフォントが変更されていたら成功です。

スクリーンショット 2021-11-23 19.25.24.png

5.これで以上です!!!

みなさんここまでお疲れ様でした!
これからGoogleFontを使ってより良いwebサイトを作っていってください!!!!!

Discussion

ログインするとコメントできます