Railsでカスタムフォントを使う時の指定方法

f:id:ihatov08:20170313091034j:plain

結構ハマりました。
いろんな記述がありますが、これでいけます。
railsは5系です。

カスタムフォントファイルの配置方法

app/assets/fonts以下に配置します。
f:id:ihatov08:20170426012039p:plain

CSSでfontのurlの指定方法

src: font-url(‘/assets/fontfile_name.eot’)のように指定します。
font-urlを使いましょう。

f:id:ihatov08:20170426232611p:plain

@font-face {
font-family: 'FontAwesome';
src: font-url('fontawesome-webfont.eot?v=4.1.0');
src: font-url('fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), font-url('fontawesome-webfont.woff?v=4.1.0') format('woff'), font-url('fontawesome-webfont.ttf?v=4.1.0') format('truetype'), font-url('fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

これでassets precompileしても大丈夫です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です