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/
Related
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
./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Module not found: You attempted to import ../fonts/poppins-regular-webfont.woff which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
I am getting this error. so in the App.css file i have #font-face, and i have font family poppinsregular and poppinssemibold.
#font-face {
font-family: 'poppinsregular';
src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'),
url('../fonts/poppins-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'poppinssemibold';
src: url('../fonts/poppins-semibold-webfont.woff2') format('woff2'),
url('../fonts/poppins-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Use an absolute path to the asset (likely the public folder). Looks like you have fonts in a standalone directory in the project root. If it's in the public folder it is bundled up and accessible.
#font-face {
font-family: 'poppinsregular';
src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
url('/fonts/poppins-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'poppinssemibold';
src: url('/fonts/poppins-semibold-webfont.woff2') format('woff2'),
url('/fonts/poppins-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Or move (or check) that the /fonts directory is within the /src directory. Perhaps this *.css file is in the src root and /fonts is actually within /src, perhaps you meant . instead of .. to mean the current directory then fonts.
#font-face {
font-family: 'poppinsregular';
src: url('./fonts/poppins-regular-webfont.woff2') format('woff2'),
url('./fonts/poppins-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'poppinssemibold';
src: url('./fonts/poppins-semibold-webfont.woff2') format('woff2'),
url('./fonts/poppins-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I downloaded a font called Helio from envato, but I can't get the font into my local file (haven't tried live).
My code is
#font-face {
font-family: 'helios_roundedregular';
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
line-height: 1.4;
margin: 0;
padding: 0;
font-family: Helios Rounded;
font-weight: normal;
font-style: normal;
}
This is a picture to the file path:
I believe it's correct. The I have the root folder, the css folder, and the font folder which contain the font files. The img shows the css and font folders open
The file names differ from the font in your path.
change
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
to
src: url('../css/fonts/Helios Regular.woff') format('woff'),
url('../css/fonts/Helios Rounded.woff') format('woff');
Also, if your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') format('woff');
your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') forma
You seems to be using wrong name for Font-Family, try this name instead.
#font-face {
font-family: 'Helios Rounded';
}
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.
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!)