I have a Rails 4.1.8 app where I am trying to use custom avenir fonts.
I have added the fonts in 2 places app/assets/fonts & app/assets/stylesheets. I also have added some of these in vendor/assets/stylesheets/fonts.
One of the fonts AvenirLTStd-Heavy.otf is not getting applied somehow.
screen.scss
#font-face {
font-family: "AvenirLTStd-Heavy";
src: url('/assets/fonts/AvenirLTStd-Heavy.otf');
}
.avenir-heavy {
font-family: "AvenirLTStd-Heavy";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
application.rb
config.assets.paths << Rails.root.join(* %w(vendor assets bower_components))
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf .otf)
config/initializers/assets.rb
Rails.application.config.assets.paths << "#{Rails.root}/app/assets/fonts"
Rails.application.config.assets.paths << "#{Rails.root}/vendor/assets/stylesheets/fonts"
Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf .otf)
What am I doing wrong ?
Include your font path in assets precompile paths and just use the font name & specify the format as below:
#font-face {
font-family: "AvenirLTStd-Heavy";
src: url('AvenirLTStd-Heavy.otf') format("opentype");
}
Related
I have a css file which I included into Angular project this way:
{
"styles" : [
"src/assets/css/style.css"
],
}
Into angular.json I added:
"assets": [
"src/favicon.ico",
"src/assets"
],
But into the css file font files are loaded like:
src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57");
src: url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"), url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2"),
I get error:
Can't resolve 'assets/fonts/glyphicons-halflings-regular.ttf'
And many more other like this.
What is the proper way to solve this problem?
You can add your font as follows:
#font-face {
font-family:"Your font";
src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57"),
url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"),
url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2");
}
Hope it help you.
I usually include my fonts like this :
#font-face { font-family: "Nunito Light"; font-display: swap; src: url('../font/Nunito/Nunito-Light.ttf'); }
You should just include .ttf file of your fonts instead of including .eot, .woff2
here : Everythings fonts
you can change .woff2 font to .ttf font
I have
users.scss
#font-face {
font-family: scriptina;
src: asset-url('scriptina.ttf')
}
.script {
font: scriptina, cursive;
}
Which generates
#font-face {
font-family: scriptina;
src: url(/scriptina.ttf);
}
/* line 18, C:/Users/Chloe/workspace//app/assets/stylesheets/users.scss */
.script {
font: scriptina, cursive;
}
But http://localhost:3000/scriptina.ttf generates
Routing Error
No route matches [GET] "/scriptina.ttf"
$ ls app/assets
config images javascripts scriptina.ttf stylesheets
Rails 5
Reference: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
One method (outlined here) would be to add a fonts folder to app/assets, and then add it to the folders that your app will look for assets in by editing config/application.rb:
# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
Then move scriptina.ttf into app/assets/fonts and your asset-url helper will then be referencing a valid path to your font.
The code below should work fine, however, does not take effect.
I've defined the following in application.rb, development.rb, production.rb:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
fonts.scss:
#font-face {
font-family: 'Garamond-Pro-Italic';
src: url('/assets/fonts/Adobe_Garamond_Pro_Italic.ttf') format('ttf');
}
buttons.scss:
.menu-button
{
font-family: 'Garamond-Pro-Italic', sans-serif;
}
Try this in your fonts.scss:
// First line of file:
//= depend_on_asset "Garamond-Pro-Italic.ttf"
#font-face {
font-family: 'Garamond-Pro-Italic';
src: url(font-path('Adobe_Garamond_Pro_Italic.ttf')) format('truetype');
}
In application.scss:
//= require <path_to_scss_file>
You should only need the following line in application.rb:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Of course, make sure Adobe_Garamond_Pro_Italic.ttf is actually in the app/assets/fonts/ directory and not vendor, lib, or public.
If that doesn't work post any asset 404 errors you get in your dev console along with the compiled fonts.scss file.
I've added bootstrap-sass into my project and import it to my application.scss file like this
#
import "../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap-compass";
.bootstrap{
#import "../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap";
}
In the bootstrap compass file, there are functions
#function twbs-font-path($path) {
#return font-url($path, true);
}
#function twbs-image-path($path) {
#return image-url($path, true);
}
Which will be used to set the paths for images and fonts.
After I build the css file using compass, the output of the css file contains the following paths to the font files
#font-face {
font-family: 'Glyphicons Halflings';
src: url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.eot);
src: url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix) format("embedded-opentype"), url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.woff) format("woff"), url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.ttf) format("truetype"), url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg");
}
How can I change it so that the source path to become:
src: url(./fonts/bootstrap/glyphicons-halflings-regular.eot)
instead of src: url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.eot)
Please note that the application.scss was built by grunt-contrib-compass
Thanks.
You should be able to change your compass configuration and set the fonts_dir to be 'fonts' instead of (as it seems) '.tmp/styles/fonts'.
I followed every single tutorial on internet to make foundation icons work in production mode but I failed every time.
I do not want to use any gemify css library, that will simply not work if rails does not serve the assets.
#app/assets/fonts
- foundation-icons.eot
- foundation-icons.svg
- foundation-icons.ttf
- foundation-icons.woff
#app/assets/stylesheets/foundation-icons
#font-face {
font-family: "foundation-icons";
src: font-url("foundation-icons.eot");
src: font-url("foundation-icons.eot?#iefix") format("embedded-opentype"),
font-url("foundation-icons.woff") format("woff"),
font-url("foundation-icons.ttf") format("truetype"),
font-url("foundation-icons.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
.fi-address-book:before,
....
#config/application.rb
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
If I run the command:
RAILS_ENV=production rake assets:precompile
I obtain:
#public/assets/
- foundation-icons-7eadaa6a15e069d84c07540345524b0e.eot
- foundation-icons-7eadaa6a15e069d84c07540345524b0e.ttf
- foundation-icons-7eadaa6a15e069d84c07540345524b0e.woff
- foundation-icons-ffbd67b2dc2f5e03fca68691f97f051d.svg
My page layout will render the sprokets manifest
<%= stylesheet_link_tag "main/manifest/about_manifest" %>
that contain the lines:
*= require foundation_and_overrides
*= require foundation-icons
If I take a look to my about_manifest-90e09360ea22dff94eb45a5550df521b.css
#font-face {
font-family: "foundation-icons";
src: url(/assets/foundation-icons-7eadaa6a15e069d84c07540345524b0e.eot);
src: url(/assets/foundation-icons-7eadaa6a15e069d84c07540345524b0e.eot?#iefix) format("embedded-opentype"), url(/assets/foundation-icons-7eadaa6a15e069d84c07540345524b0e.woff) format("woff"), url(/assets/foundation-icons-7eadaa6a15e069d84c07540345524b0e.ttf) format("truetype"), url(/assets/foundation-icons-ffbd67b2dc2f5e03fca68691f97f051d.svg#fontcustom) format("svg");
font-weight: normal;
font-style: normal; }
When I run in production with
RAILS_ENV=production rails s
I have no warning in my chrome console. All assets are found but my icons looks like squares.
The code to include the icon is
<i class="fi-mail"></i>
#production.rb
config.serve_static_assets = true #This one will be false with passenger
config.assets.digest = true
config.assets.compile = false
Please help.
PS: I should say also that I use a custom font for my text and it work perfectly.