30
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

rails5のフォントファイルの読み込み方が調べても分かりづらかったのでわかりやすく説明してみるよ。

Posted at

下準備

まず、好きなフォントファイル(ttfファイル、woffファイル、otfファイル等)をダウンロードします。

次に、app/assetsの中に、fontsという(フォルダ)を作ります

その中に、ダウンロードしたファイルを入れます。
ここまでで下準備はOKです。

定義

まず、適応したいcssファイルを開いてください。
今回は、ページ全体に適応させたいので、application.cssに適応していきます。

一番最初に、src:font-urlで読み込みたいファイルを指定します。/や../などは入れないでください。

application.css
 @font-face{
   src: font-url('font-file.ttf') format('truetype');
 }

@font-faceは一体何かというと、プログラミングの経験があるならfont用の関数だと思って貰えばいいと想います。つまり外から呼び出さないと動かすことができません。

次に、fontを呼び出すための(変数)を準備します。font-faceにおける変数は何になるかというと

application.css
 @font-face{
   font-family: "hoge"
   src: font-url('font-file.ttf') format('truetype');
 }

追加されたところを見ていただければわかる通り、この(font-family: "hoge")の部分が変数の(宣言)になっています。何を宣言してもいいので、好きな変数を決めましょう。

変数とは:様々な値を保存しておくための箱というイメージで合っていると思います。変数についての詳しい記事は箱(変数)の中身はなんだろう?を参照してください。

適応

最後に、fontを使いたい場所に適応していきます。ここからはいつもと同じ流れでfont:familyを使えるため特に難しいところはないと思います。

例えば、body全体に適応したかったら

application.css
 @font-face{
   font-family: "hoge"
   src: font-url('font-file.ttf') format('truetype');
 }

body{
  font-family: 'hoge';
}

このようにすれば適応できるようになります。また、例えば部分的に見出しだけに適応したかった場合は

application.css
 @font-face{
   font-family: "hoge"
   src: font-url('font-file.ttf') format('truetype');
 }

body{
  font-family: serif;
}
h1{
  color:gray;
  font-family: "hoge";
}

このようにすれば適応することができます!

なお、@font-faceの中ではフォント関係の定義は一括して設定することもできるので、予めフォントの文字を太めにし、フォントのスタイルをitalicにしたかったら

application.css
 @font-face{
   font-family: "hoge"
   src: font-url('font-file.ttf') format('truetype');
   font-style:italic;
   font-weight:bold;
 }

このようにまとめて指定しておくことも可能になります!

細かい部分についてはいろいろ触りながら感覚を掴んでみてくださいね。

まとめ

今回は、私も相当頭を悩ませてしまった@font-faceの使い方と、実際のファイルの読み込み方をできるだけわかりやすく説明してみました。

railsの基礎をある程度抑えられていれば、この記事を読みながら作業を進められると思います!

また、もし間違っているところ等ありましたら遠慮なくコメントで教えてくださいね。

30
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?