In development mode the custom fonts (Raleway) are present but it is not reflected in the staging environment. I deployed my app to Heroku.
Added the following command in the application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Added the font-family in the application.bootstrap.scss
#font-face {
font-family: 'raleway-regular';
font-style: normal;
font-weight: 400;
src: font-url('raleway-regular.ttf') format('truetype');
}
#font-face {
font-family: 'raleway-semibold';
src: font-url('raleway-semibold.ttf') format('truetype');
}
#font-face {
font-family: 'raleway-medium';
src: font-url('raleway-Medium.ttf') format('truetype');
}
The font files are available in the my_app/app/assets/fonts directory.
I created my rails using the command rails new my_app --javascript esbuild --css bootstrap --database postgresql
Rails version 7
Try to use url instead of font-url. It works for me. With scss and the same folder configuration.
#font-face {
font-family: 'font-name';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("font-name.ttf") format('truetype');
}
Rails creates its own font path
/assets/font-name-afb238caf5f2396b697d84a32556090b0851e382692f617c6aeaac79e02971a0.ttf
Related
With Rails 5, how do I reference a custom font file I have uploaded? I have placed the file in
app/assets/fonts/chicagoflf-webfont.woff
Then in my CSS file, I have
#font-face {
font-family: 'chicagoflfregular';
src: url('fonts/chicagoflf-webfont.woff2') format('woff2'),
url('fonts/chicagoflf-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
but I don't see that the font is loading, even after restarting my server. What is the proper path I should be using in my "url" field?
Assuming you are using Sass, you can use either use font-url or asset-url to call your font. And considering you placed your custom fonts in app/assets/fonts, you should be able to call the fonts directly with no prefix in the path like so
#font-face {
font-family: 'chicagoflfregular';
src: font-url('chicagoflf-webfont.woff2') format('woff2'),
font-url('chicagoflf-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
or
#font-face {
font-family: 'chicagoflfregular';
src: asset-url('chicagoflf-webfont.woff2') format('woff2'),
asset-url('chicagoflf-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
or
If you are not using Sass, then with using url you should able to call the font with prefix assets not fonts like so
#font-face {
font-family: 'chicagoflfregular';
src: url('/assets/chicagoflf-webfont.woff2') format('woff2'),
url('/assets/chicagoflf-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
And if you haven't pre-compiled your assets, your fonts won't appear. So you need to pre-compile the assets. For example for production environment do
RAILS_ENV=production bin/rails assets:precompile
and don't forget to restart the server
I suggest you to use font_url helper instead of url
#font-face {
font-family: 'chicagoflfregular';
src: font_url('fonts/chicagoflf-webfont.woff2') format('woff2'),
font_url('fonts/chicagoflf-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
AssetUrlHelper.html#method-i-font_url from official docs
UPDATE
Did you added fonts folder in config/application.rb?
module YourApp
class Application < Rails::Application
...
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf )
...
end
end
Add the fonts path to the assets path as below:
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
# Fonts
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)\z/
Then, you can change the css file to css.erb file and then you can use rails helper methods font_path or asset_path for specifying the font URL in src as below:
custom.css.erb
#font-face {
font-family: 'chicagoflfregular';
src: url("<%= asset_path('chicagoflf-webfont.woff2') %>") format('woff2'),
url("<%= asset_path('chicagoflf-webfont.woff') %>") format('woff');
font-weight: normal;
font-style: normal;
}
Please make sure you have precompiled the assets in production environment.
Environment is a React Nodejs app
My CSS:
#font-face {
font-family: 'Open Sans';
src:
url('/src/public/fonts/OpenSans-Regular.eot'),
url('/src/public/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/src/public/fonts/OpenSans-Regular.woff') format('woff'),
url('/src/public/fonts/OpenSans-Regular.woff2') format('woff2'),
url('/src/public/fonts/OpenSans-Regular.ttf') format('truetype'),
url('/src/public/fonts/OpenSans-Regular.svg') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'Open Sans';
src:
url('/src/public/fonts/OpenSans-Semibold.eot'),
url('/src/public/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
url('/src/public/fonts/OpenSans-Semibold.woff') format('woff'),
url('/src/public/fonts/OpenSans-Semibold.woff2') format('woff2'),
url('/src/public/fonts/OpenSans-Semibold.ttf') format('truetype'),
url('/src/public/fonts/OpenSans-Semibold.svg') format('svg');
font-style: normal;
font-weight: bold;
} ....
I have two different definitions for Open Sans as the font-style and font-weight depends on additional classes on elements like bold italic etc which seems to be an acceptable fomat
Usage:
.union {
font-family: 'Open Sans';
padding-left: 12px;
& :global(.bold) {
font-weight: 700;
}
& :global(.italic) {
font-style: italic;
font-weight: 400;
}
}
Webpack config:
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
I have the font files under public/fonts folder, it was working fine up until a day ago but now we are getting tons of console errors failed to decode downloaded font invalid version tag for woff and ttf files. I tried other solutions link1 and link2 but it didn't help. I can see the fonts loading just fine from the public folder under Chrome's network tab
Any idea why am still getting these errrors?
I could fix the error. It was a combination of a couple things.. first was the path to the font file, I was setting the path as if there was no “build” happening, Webpack was putting them under /assets after release build so I had to update my path from src/public/fonts to /fonts as after the build static files are automagically looked under assets folder + adding regex to support versioning in my webpack loader config + adding mimetype for woff files
i'm using Montserrat font in my ruby on rails application. In my desktop the font appear, but I checked on other pc and it's on times new roman.
I added this in application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
and my fonts are in assets/fonts/montserrat:
and this is my font.scss
#font-face {
font-family: 'Montserrat';
font-weight: normal;
font-style: normal;
src: font-url('montserrat/montserrat-regular-webfont.eot');
src: font-url('montserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
font-url('montserrat/montserrat-regular-webfont.woff') format('woff'),
font-url('montserrat/montserrat-regular-webfont.ttf') format('truetype'),
font-url('montserrat/montserrat-regular-webfont.svg') format('svg');
}
and I call the font like this:
.welcome{
font-family: 'Montserrat';
color: #333;
text-align: center;
}
what am I doing wrong?
You must run bundle exec rake assets:precompile RAILS_ENV=production then do a git add/git commit then push the new commit to your production.
Updated
Now this is what my application.scss looks like now
#font-face {
font-family: 'DidotLTStd-Roman';
src: font-url('2C0947_0_0.eot') format("embedded-opentype");
src: font-url('2C0947_0_0.woff') format('woff');
src: font-url('2C0947_0_0.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DidotLTStd-Italic';
src: font-url('2C0947_1_0.eot') format("embedded-opentype");
src: font-url('2C0947_1_0.woff') format('woff');
src: font-url('2C0947_1_0.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'AvantGardeGothicITCW02XLt';
src: font-url('2C0947_2_0.eot') format("embedded-opentype");
src: font-url('2C0947_2_0.woff') format('woff');
src: font-url('2C0947_2_0.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}
.about {
font-family: 'AvantGardeGothicITCW02XLt';
}
including this line in application.rb
config.assets.precompile += %w( .svg .eot .woff .ttf )
but still not working. No problems in chrome console and I doublechecked the file names.
ActionController::RoutingError (No route matches [GET] "/assets/webfonts/2C0947_1_0.ttf"):
Its my first time integration third party fonts in the ruby on rails application. I am going the directions here in the corrected answer
Using fonts with Rails asset pipeline
Its a rails 4.0.2 app.
I dropped all of my eot, ttf, woff fonts into the app/assets/fonts folder
by default since this is a 4.0.2 app it should look at this fonts folder
I am using scss.
I added the following to my application.scss file
#font-face {
font-family: 'DidotLTStd-Roman';
src:url('2C0947_0_0.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DidotLTStd-Italic';
src:url('2C09047_1_0.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'AvantGardeGothicITCW02XLt';
src:url('2C09047_2_0.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.about {
font-family: 'DidotLTStd-Italic';
}
I have alternate the src:font-url to src:url
I have tried adding this to application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
I have restarted the server. This is what I see when I check in the console log
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/2C09047_1_0.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/webfonts/2C0947_1_0.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/webfonts/2C0947_1_0.ttf
its looking for the webfonts folder and I even changed the name of the fonts folder to webfonts but it still couldn't find it.
So the zip folder that I bought also contain a layout.css and a mywebfontkit.css which I drop into the stylesheets folder inside assets. I also dropped the highlight.js into the js assets folder as well.
Try adding this to your application.rb
# Precompile additional assets - from http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline
config.assets.precompile += %w( .svg .eot .woff .ttf )
Also, FYI, it was the font-url version that worked for me - like this:
#font-face {
font-family: 'interstate-boldcondensedbold';
src: font-url("interstate-boldcondensed-webfont.eot");
src: font-url("interstate-boldcondensed-webfont.eot?#iefix") format("embedded-opentype"), font-url("interstate-boldcondensed-webfont.woff") format("woff"), font-url("interstate-boldcondensed-webfont.ttf") format("truetype"), font-url("interstate-boldcondensed-webfont.svg#interstate-boldcondensedbold") format("svg");
font-weight: normal;
font-style: normal;
}
(And don't forget to restart the server again afterwards!)
I'm trying to use a custom font in my rails app, but can't figure out what I'm doing wrong. I've created a folder called fonts in the assets folder with the two fonts I'm using. And then I call the two fonts in my css file called home.css.scss.erb
CSS:
#font-face {
font-family: 'Proxima Nova';
src: url('<%= asset_path(/assets/fonts/ProximaNova-Regular.otf) %>', font);
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Gotham';
src: url('<%= asset_path(/assets/fonts/Gotham-Medium.ttf) %>', font);
font-weight: normal;
font-style: normal;
}
Then in my config folder in application.rb I've added
config.assets.paths << "#{Rails.root}/app/assets/fonts"
But this still doesn't seem to be working.. any ideas why?
I've used custom fonts before but never need to use asset_path helper. Using relative path in CSS should be enough. My settings are similar to these:
# config/application.rb
config.assets.paths << Rails.root.join("assets", "fonts")
# CSS
#font-face {
font-family: 'Proxima Nova';
// No need any embeded Ruby code here
src: url('fonts/ProximaNova-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Gotham';
src: url('fonts/Gotham-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
In Rails 4.2:
your_controller.scss
#font-face {
font-family: "Tungsten-Bold";
src: url('Tungsten-Bold.otf') format("opentype");
font-weight: normal;
font-style: normal;
}
in config/initializers/assets.rb
Rails.application.config.assets.paths << "#{Rails.root}/app/assets/fonts"
Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf .otf)
And put font files in >> app/assets/fonts/