👏
rails googlefont導入仕方
１．はじめに
RailsのHTML/CSSに対して、GoogleFont適用する2つの方法を学んでもらうのが
この記事のゴールだよ！
2. まずは、GoogleFontのサイトから使用するFontを選ぶ
GoogleFontのサイト
↑ ここからサイトへ飛びます
そしたら上記のページに行くと思います。
この中から使用したいフォントを選択します。
今回は変化がわかりやすいように"Comforter Brusho"を使います。
選んだフォントをクリックします。
そうすると、以下のようなページになると思います。
そしたら、右上にある**"View your selected families"**をクリックします。
そうすると、以下の画像が現れると思います。
これで、GoogleFontを適応させる準備は整いました。
3. ここからはGoogleFontの導入方法を2つ紹介します。
1. application.cssを使って導入する方法からやります。
上記の<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>
これでcssでfont-family指定をしてあげれば、完了です。
font-familyはgooglefontのサイトからコピペすれば大丈夫です。
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;
}
これでscssでfont-family指定をしてあげれば、完了です。
font-familyはgooglefontのサイトからコピペすれば大丈夫です。
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.完成図
このようにフォントが変更されていたら成功です。
５．これで以上です！！！
みなさんここまでお疲れ様でした！
これからGoogleFontを使ってより良いwebサイトを作っていってください！！！！！
Discussion