65

I have a Rails 4 application and I am trying to use a custom font.

I have followed many tutorials on this and somehow it's just not working for my application.

I am using application.css.less and have the following declaration:

@font-face {
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),
        font-url('HDV_Peace.woff') format('woff'),
        font-url('HDV_Peace.ttf') format('truetype'),
        font-url('HDV_Peace.svg#webfont') format('svg');
}

Note: I have tried using url() instead of font-url() also. The former generates 404 errors on the console, where the latter just doesn't seem to do anything at all. In the chrome dev tools under resources, the font files are not appearing under the assets folder, or anywhere

in my config/application.rb I have:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

And in both my config/environments/development.rb and config/environments/production.rb I have:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

My font files are located at app/assets/fonts and are not contained in a folder below that...

What am I missing?

UPDATE:

folder structure

app
└── assets
    └── fonts
        ├── HDV_Peace.eot
        ├── HDV_Peace.svg
        ├── HDV_Peace.ttf
        └── HDV_Peace.woff
4

9 に答える 9

52

Rails 4 には、フォントのパスを設定するヘルパーがあります。

/assets/fonts または vendor/assets/fonts にフォントがある場合、Rails 4 はそれらを見つけます! これを利用するには、Bootstrap CSS ファイルで @font_face 呼び出しを次のように変更します。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       font-url('glyphicons-halflings-regular.woff') format('woff'), 
       font-url('glyphicons-halflings-regular.ttf') format('truetype'), 
       font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

フォントファイルの前にフォルダ指定がないことに注意してください。これは Rails ヘルパーによって完了します。

于 2014-09-10T09:07:11.643 に答える
20

場所は動的であるため、フォント ディレクトリをハードコーディングしないでください。

画像用の組み込みヘルパーがあるように、フォント用の組み込みヘルパーもあります: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

例：

@font-face {
    font-family: 'QuicksandOTF';
    src: font_url('Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
于 2014-05-13T20:39:36.140 に答える
11

これは、Rails 4.1 アプリでうまくいきました。

  1. `app/assets/fonts` の下にフォントを追加します
  2. 次のように `.css.scss` ファイルから呼び出します。
@font-face {
  font-family: 'icomoon';
  src: url(font-path('icomoon.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('icomoon.woff')) format('woff'),
    url(font-path('icomoon.ttf'))  format('truetype'),
    url(font-path('icomoon.svg') + "#icomoon") format('svg');
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
于 2015-03-25T19:48:14.807 に答える
9

app/assets/fonts ディレクトリを作成したら、「rails サーバー」を再起動します。

于 2014-09-10T14:26:10.360 に答える
2

assets/fontsディレクトリからフォントが検出されないことがあります。

セキュリティが問題にならない場合は、fontsディレクトリを public フォルダーに入れることができます。その後、それらはpublic/レベルで利用可能になります。

于 2014-12-18T09:53:21.737 に答える
1

Rails 4 でapplication.rbを変更する必要はありません。@Parker Selbert が言ったように/assets/プレフィックスを追加するだけで、次のように動作します。

@font-face {
  font-family: 'custom-font-name';
  src: font-url('/assets/_folder_/fontX-webfont.eot');
  src: font-url('/assets/_folder_/fontX-webfont.eot?#iefix') format('embedded-opentype'),
       font-url('/assets/_folder_/fontX-webfont.woff') format('woff'),
       font-url('/assets/_folder_/fontX-webfont.ttf') format('truetype'),
       font-url('/assets/_folder_/fontX-webfont.svg#sociconregular') format('svg');
  font-weight: normal;
  font-style: normal;

}
于 2014-02-26T18:34:31.753 に答える