下準備
まず、好きなフォントファイル(ttfファイル、woffファイル、otfファイル等)をダウンロードします。
次に、app/assetsの中に、fontsという(フォルダ)を作ります
その中に、ダウンロードしたファイルを入れます。
ここまでで下準備はOKです。
定義
まず、適応したいcssファイルを開いてください。
今回は、ページ全体に適応させたいので、application.cssに適応していきます。
一番最初に、src:font-urlで読み込みたいファイルを指定します。/や../などは入れないでください。
@font-face{
src: font-url('font-file.ttf') format('truetype');
}
@font-faceは一体何かというと、プログラミングの経験があるならfont用の関数だと思って貰えばいいと想います。つまり外から呼び出さないと動かすことができません。
次に、fontを呼び出すための(変数)を準備します。font-faceにおける変数は何になるかというと
@font-face{
font-family: "hoge"
src: font-url('font-file.ttf') format('truetype');
}
追加されたところを見ていただければわかる通り、この(font-family: "hoge")の部分が変数の(宣言)になっています。何を宣言してもいいので、好きな変数を決めましょう。
変数とは:様々な値を保存しておくための箱というイメージで合っていると思います。変数についての詳しい記事は箱(変数)の中身はなんだろう?を参照してください。
適応
最後に、fontを使いたい場所に適応していきます。ここからはいつもと同じ流れでfont:familyを使えるため特に難しいところはないと思います。
例えば、body全体に適応したかったら
@font-face{
font-family: "hoge"
src: font-url('font-file.ttf') format('truetype');
}
body{
font-family: 'hoge';
}
このようにすれば適応できるようになります。また、例えば部分的に見出しだけに適応したかった場合は
@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にしたかったら
@font-face{
font-family: "hoge"
src: font-url('font-file.ttf') format('truetype');
font-style:italic;
font-weight:bold;
}
このようにまとめて指定しておくことも可能になります!
細かい部分についてはいろいろ触りながら感覚を掴んでみてくださいね。
まとめ
今回は、私も相当頭を悩ませてしまった@font-faceの使い方と、実際のファイルの読み込み方をできるだけわかりやすく説明してみました。
railsの基礎をある程度抑えられていれば、この記事を読みながら作業を進められると思います!
また、もし間違っているところ等ありましたら遠慮なくコメントで教えてくださいね。