これが私がやったことです:
まずfonts
、ディレクトリ内にフォルダーを作成しましたapp/assets
。
次に、この新しいフォルダーを認識するようにアセット パイプリングを構成しました。
config/environments/development.rb
:
# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf .otf )
次に、次のように MIME タイプを構成しますconfig/initializers/mime_types.rb
。
# Be sure to restart your server when you modify this file.
# Here are some example that came with the default Rails project.
# Add new mime types for use in respond_to blocks:
# Mime::Type.register "text/richtext", :rtf
# Mime::Type.register_alias "text/html", :iphone
Rack::Mime::MIME_TYPES['.otf'] = 'application/x-font-opentype'
最後に、SCSS でフォントを参照します。
@font-face {
font-family: 'ArnoProDisplay';
src: url('ArnoPro-Display.otf');
font-weight: normal;
font-style: normal;
}
Google Chrome を使用していますが、コンソールには次のように表示されます。
Resource interpreted as Font but transferred with MIME type
application/vnd.oasis.opendocument.formula-template:
"http://localhost:3000/assets/ArnoPro-Display.otf".
[ネットワーク] タブでフォントを正しく表示できます。