はじめに

なんとかPFを作り上げたものの、デザインがダセェなぁと思いフォントを変えた時の記録です。備忘録。
PFはこちら→Parrot

やっていく

まず初めに、変更したいフォントを探します。

ちなみに自分は、こちらのサイトから探して、ダウンロードしました。
　→FONT FREE

zipファイルがダウンロードされ、解凍すると、こんな感じのフォルダが現れると思います。これでOKです。（フォントによっては、.otfではなく.ttfの場合もありますが問題ないです。）

この時、ダウンロードしたもの全部ではなく、.otf（または、.ttf）ファイルだけを移してください。先ほどのスクショのものだと、03スマートフォントUI.otfだけですね。

移す場所は、assets/fontsの中です。（fontsフォルダは作成してください！😖）

気付いた方もいると思いますが、日本語名のファイルがあると開いてくれないため、意図的にファイル名から日本語を削除しています😖　（今回だと、03スマートフォントUIから03UI）
特にフォント変更に支障は出ないので、もし日本語があった場合は削除・変更してください！

なんで開かないかの詳しく理由はこちら
　→Lonely Mobiler

残りは、application.scssを少しいじるだけ！

まずは、

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は気にしないでください。）

application.scss

body {
  background-color: #DFEFED;
  font-family: '03UI';
}

すると、、、

でけた！！ちょっと雰囲気が変わった！！

細かい説明は省いていますが、こんなに簡単にできました。是非みなさんもお試しあれ💁🏻