Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
512 views
in Technique[技术] by (71.8m points)

Rails 4: Why are fonts not loading in production?

I can't load fonts in my Rails 4 app in production, it works normally in development.

Assets are precompiled on the server while deploying.

I have my fonts in

app/assets/fonts

My app.css:

@font-face {
    font-family: 'WalkwayBoldRegular';
    src: url('Walkway_Bold-webfont.eot');
    src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Walkway_Bold-webfont.woff') format('woff'),
         url('Walkway_Bold-webfont.ttf') format('truetype'),
         url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

In my production.rb I have:

config.assets.precompile << Proc.new { |path|
  if path =~ /.(eot|svg|ttf|woff)z/
    true
  end
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

We had this problem last week - the problem is that your assets will be compiled to have MD5 hashes on them, whilst your standard CSS will still be looking for their "standard" names. This is a problem with images & fonts.

@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-th-webfont.eot');
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-th-webfont.woff') format('woff'),
         asset_url('fonts/akagi-th-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;
}

This is an example of how you should use scss files to load assets dynamically. These files are compiled (either before push or during init) into your .css files, all with their assets correctly synced.

We had a similar problem to you with Heroku, and managed to get it working by putting our files into /stylesheets/layout/fonts.css.scss and then calling

@import '/layout/fonts';

We also called our application.css -> application.css.scss to support the @import function


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...