オリジナルフォントの設定方法（Ruby on Rails）

f:id:ryoutaku_jo:20190309140825p:plain

【結論】

・CSSでは、font-familyプロパティを用いることで、
　フォントの種類を自由に設定する事が可能

・デフォルトでは、ユーザー側の環境（OS、ブラウザ）に
　設定されているフォントの情報を読み込んで表示を行われる。

・オリジナルフォントを利用したい手順は下記の通り
　１：フォントファイルを用意
　２：fontsフォルダの作成とファイルの配置
　３：フォントファイルを読み込む記述を追加
　４：font-familyプロパティで使用可能に

【目次】

【本題】

CSSでは、font-familyプロパティを用いることで、
フォントの種類を自由に設定する事が可能です。

↓デフォルト
f:id:ryoutaku_jo:20190309140838p:plain

font-family:  "ＭＳ 明朝",serif;

↓上記のCSSを適用後
f:id:ryoutaku_jo:20190309140857p:plain

デフォルトでは、ユーザー側の環境（OS、ブラウザ）に
設定されているフォントの情報を読み込んで表示を行います。

下記の様な、通常OSやブラウザに設定されていない
オリジナルのフォントを使用したい場合には、別途設定を行う必要があります。

今回は、Ruby on Railsでのオリジナルフォント設定方法をまとめます。

まず、使用したいフォントのファイルを用意します。
今回は、下記フォントを利用させて頂きます。

上記サイトから、フォントファイルをダウンロードしてきます。

フォントファイルを配置する為に
app/assets配下にfontsフォルダを作成します。

合わせて、先ほどダウンロードした
fontsファイルを、フォルダ内に格納します。

f:id:ryoutaku_jo:20190309142431p:plain

３：cssファイルに、フォントファイルを読み込む記述を追加

先ほど配置したフォントファイルを読み込む為の記述を追加します。
今回は、どのページでも適応させたいので、
application.cssファイルに記述します。

@font-face {
  font-family: 'KodomoRounded';
  src: font-url('KodomoRounded.otf') ;
}

なお、CSSファイルでもSCSSファイルでも、記述方法は変わりません。

また、下記の様に、別のフォント設定も追加する事が可能で、
更に自分好みにカスタマイズする事も出来ます。

@font-face {
  font-family: 'KodomoRounded';
  src: font-url('KodomoRounded.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

４：font-familyプロパティを使用

先ほどの設定で、font-familyプロパティで
KodomoRoundedが指定できる様になったので、
実際に設定して見ます。

.top-view{
  font-family: 'KodomoRounded';
  font-size: 80px;
}

f:id:ryoutaku_jo:20190309144903p:plain

正常に設定が出来ました。

オリジナルアプリ作成と就活対策。

学習開始からの期間：91日
今日までの合計時間：888h
一日あたりの平均学習時間：9.8h
今日までに到達すべき目標時間：831h
目標との解離：57h
「10,000時間」まで、

残り・・・「9112時間！」