0
1

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 3 years have passed since last update.

【初学者】【5分で終了】Railsアプリケーションでフォントを変更する方法。

Posted at

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

#やっていく
###①いい感じのフォントを探す
まず初めに、変更したいフォントを探します。

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

zipファイルがダウンロードされ、解凍すると、こんな感じのフォルダが現れると思います。これでOKです。(フォントによっては、.otfではなく.ttfの場合もありますが問題ないです。)
スクリーンショット 2020-08-15 19.26.44.png

###②ダウンロードしたファイルを自分のアプリケーションに移す
この時、ダウンロードしたもの全部ではなく、.otf(または、.ttf)ファイルだけを移してください。先ほどのスクショのものだと、03スマートフォントUI.otfだけですね。

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

スクリーンショット 2020-08-15 19.38.40.png

気付いた方もいると思いますが、日本語名のファイルがあると開いてくれないため、意図的にファイル名から日本語を削除しています😖 (今回だと、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';
}

すると、、、

スクリーンショット 2020-08-15 20.03.04.png

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

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

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?