#はじめに
なんとかPFを作り上げたものの、デザインがダセェなぁと思いフォントを変えた時の記録です。備忘録。
PFはこちら→Parrot
#やっていく
###①いい感じのフォントを探す
まず初めに、変更したいフォントを探します。
ちなみに自分は、こちらのサイトから探して、ダウンロードしました。
→FONT FREE
zipファイルがダウンロードされ、解凍すると、こんな感じのフォルダが現れると思います。これでOKです。(フォントによっては、.otfではなく.ttfの場合もありますが問題ないです。)
###②ダウンロードしたファイルを自分のアプリケーションに移す
この時、ダウンロードしたもの全部ではなく、.otf(または、.ttf)ファイルだけを移してください。先ほどのスクショのものだと、03スマートフォントUI.otfだけですね。
移す場所は、assets/fontsの中です。(fontsフォルダは作成してください!😖)
気付いた方もいると思いますが、日本語名のファイルがあると開いてくれないため、意図的にファイル名から日本語を削除しています😖 (今回だと、03スマートフォントUIから03UI)
特にフォント変更に支障は出ないので、もし日本語があった場合は削除・変更してください!
なんで開かないかの詳しく理由はこちら
→Lonely Mobiler
###③少しいじって終わり
残りは、application.scssを少しいじるだけ!
まずは、
@font-face {
font-family: '03UI';
src: asset_url('/assets/03UI.otf') format("truetype");
font-weight: normal;
font-style: normal;
}
こんな感じにします。
そんでもって、変更したい箇所にfont-familyを追加!(今回自分は全体なのでbodyに。background-colorは気にしないでください。)
body {
background-color: #DFEFED;
font-family: '03UI';
}
すると、、、
でけた!!ちょっと雰囲気が変わった!!
#おわりに
細かい説明は省いていますが、こんなに簡単にできました。是非みなさんもお試しあれ💁🏻