はじめに
個人開発中のアプリにてwebフォントを導入したのでアウトプット！
webフォントとは
ブラウザ毎に異なるデフォルトフォントが設定されており、閲覧するブラウザによっては開発者の意図しないデザインに変化してしまうことを予め避けるために、Webサーバー上にフォントファイルを置き、開発者の意図するフォントを統一してブラウザに表示できるようにした技術のこと。
使用フォント
使用フォントはGoogle FontsのNoto Sans JP。
最近注目を浴びているフォントだとか。（たしかに落ち着きがあって読みやすい）
導入方法
①Google Fontsにログイン▼
https://fonts.google.com/
②左上のsearchでフォントを検索。（今回はNoto Sans JP）
③フォントページに移動したらstyleの中から使いたいフォントを指定してselect this styleをクリック。
すると、ページ右にサイドバーが出現するので、選択したフォントがあるか確認。
④確認をしたらEmbedをクリック
⑤htmlとcss用のコードが出現するのでコピーして貼り付け。
＃hamlを使用している場合はhamlに変換。Noto Sans JPの場合は▼
%link{:href => "https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap", :rel => "stylesheet"}/
この様になる。
なお、貼り付ける場所はhead内のmetaタグの下が好ましい。
これでwebフォントを導入できました。
参考にしてください！