I'm using Compass and it's built-in #include font-face mixin. However, the fonts are not loading. I think this may be due to the series of numbers being added to the end of the file path when it compiles.
Compiled CSS:
#font-face { font-family: "Helvetical-Neue"; src: url('/css/fonts/2C7F11_0_0.eot?1415225657'); src: url('/css/fonts/2C7F11_0_0.eot?&1415225657#iefix') format('embedded-opentype'), url('/css/fonts/2C7F11_0_0.ttf?1415225657') format('truetype'), url('/css/fonts/2C7F11_0_0.woff?1415225657') format('woff'); }
#font-face { font-family: "Helvetical-Neue-Condensed"; src: url('/css/fonts/2C7F17_0_0.eot?1415225657'); src: url('/css/fonts/2C7F17_0_0.eot?&1415225657#iefix') format('embedded-opentype'), url('/css/fonts/2C7F17_0_0.ttf?1415225657') format('truetype'), url('/css/fonts/2C7F17_0_0.woff?1415225657') format('woff'); }
Font declarations in Compass:
#include font-face("Helvetical-Neue", font-files("2C7F11_0_0.ttf", "2C7F11_0_0.woff"), "2C7F11_0_0.eot");
#include font-face("Helvetical-Neue-Condensed", font-files("2C7F17_0_0.ttf", "2C7F17_0_0.woff"), "2C7F17_0_0.eot");
$helvetica-neue: "Helvetical-Neue" !default;
$helvetica-condensed: "Helvetical-Neue-Condensed" !default;
My fonts are in the default css/fonts directory and I set my config.rb to the following:
fonts_dir = "css/fonts"
Researching this question, I came across relative_assets = true. I've tried it both with and without that and there has been no change.
Is there something I am missing or doing incorrectly? All other assets (images, videos, etc.) load just fine.
Thank you for your time. I appreciate it!
Related
i am trying to add new google fonts to some sass files , these fonts are local fonts and i am adding them using sass and url using the following code
#font-face
font-family: 'Abril Fatface'
font-style: normal
font-weight: 400
src: url('abril-fatface-v9-latin-regular.eot')
src: local('Abril Fatface'), local('AbrilFatface-Regular'),
url('abril-fatface-v9-latin-regular.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('abril-fatface-v9-latin-regular.woff2')
format('woff2'),
url('abril-fatface-v9-latin-regular.woff')
format('woff'),
url('abril-fatface-v9-latin-regular.ttf')
format('truetype'),
url('abril-fatface-v9-latin-regular.svg#AbrilFatface')
format('svg')
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected ":".
╷
7 │ url('abril-fatface-v9-latin-regular.eot?#iefix')
│ ^
╵
src/modules/editor/styles/fonts/abril-fatface-v9-latin/index.sass 7:12 #import
src/modules/editor/styles/fonts/fonts.sass 1:9 #import
src/modules/editor/styles/index.sass 10:9 root stylesheet
Try this code:
#font-face
font-family: 'Abril Fatface'
font-style: normal
font-weight: 400
src: url('abril-fatface-v9-latin-regular.woff2') format('woff2'), url('abril-fatface-v9-latin-regular.woff') format('woff')
I removed whitespace (newlines, tabs) between different urls.
Since Sass is whitespace-sensitive (in contrast to scss), the previously used new lines seem to break parsing the src property.
I am trying to get rid of the glyphicon errors in my Rails 4 project that's using Bootstrap 3. I'm not using any Bootstrap gems to add it to the asset pipeline. I manually added bootstrap.css and bootstrap.js to their respective app/assets directories and added them to application.css and application.js What I'm seeing now is the following in my web browser's console:
GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.svg 404 (Not Found)
What can be done to fix this in a Ruby on Rails application? I tried copying said files to app/assets/fonts and popped this into application.rb:
config.assets.paths << "#{Rails}/app/assets/fonts"
No luck.
All solutions provided above are dirty hacks. The correct way to solve this issue is to include "bootstrap-sprockets" before bootstrap in your sass files:
#import "bootstrap-sprockets";
#import "bootstrap";
To get the glyphicons working I had to add a line to the config/application.rb file. Add the following within class Application < Rails::Application.
config.assets.paths << "#{Rails}/vendor/assets/fonts"
Then at the terminal run the command to get the assets to compile:
rake assets:precompile RAILS_ENV=development
Now we need to update the bootrap.css file (you’ll likely need to update the bootstrap.min.css file as a result, too), search for #font-face with your text editor and update the paths to the font urls to include /assets/glyphicons-halfings-regular.* (include the file extension).
This is what the url’s will be originally in the bootstrap.css file.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
You want to change each of these resource locations to /assets/glyphicons-halfings-regular.* as shown below.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
SOURCE: [Erik Minkel Blog]
Basically you should just import bootstrap
#import "bootstrap-sprockets";
#import "bootstrap";
Problems appear when you import bootstrap components before #import "bootstrap-sprockets";
Overrides should go after #import "bootstrap-sprockets";
// bootstrap-sprockets goes first
#import "bootstrap-sprockets";
// Overrides
#import "bootstrap/variables"; // it uses $bootstrap-sass-asset-helper which is defined in bootstrap-sprockets
$btn-primary-bg: $gray-light;
#import "bootstrap";
Add the woff, ttf and svg files to:
RAILS_ROOT/vendor/assets/fonts
Create this if it doesn't exist. They should be present in the build of bootstrap you downloaded.
Also, you'll need to add this to your application.css after all your require statements:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../assets/glyphicons-halflings-regular.eot');
src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../assets/glyphicons-halflings-regular.woff') format('woff'), url('../assets/glyphicons-halflings-regular.ttf') format('truetype'), url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Moving the fonts to the /app/public folder worked but didn't seem like the Rails way.
What worked for me was putting them in /app/assets/fonts and commenting this out in bootstrap.css:
/*
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
*/
I can't seem to find the answer I'm looking for. I have an entirely static page, mostly made up of images. The font used to create the images is 'Handwriting-Dakota.ttf' found on any Mac OS X install. I have one dynamic element containing text which i want to give this font to.
I have the ttf font in the same directory as my css file.
#font-face{
font-family: dakota;
src: url('dakota.ttf') format('truetype');
}
In an html file with the css file included. <p style="font-family: dakota;">sometext</p>
I can see the rule applied in chrome's inspector but it does not change the appearance. Is what I'm trying to do impossible or am I doing it wrong?
Use this format
#font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot');
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype'),
url('fonts/myfont.svg#rsuregular') format('svg');
}
To further gain more knowledge about font-face syntax, read Bulletproof #font-face Syntax.
To get all versions of the font. google the "font converter", there will be plenty of font converter services in first page.
Make sure the url is relative to the css file and not to the webroot.
#font-face{
font-family: 'dakota';
src: url('../fonts/dakota.ttf') format('truetype');
}
And you probably should add other types to make sure other browsers can use the font without problems.
#font-face {
font-family: 'dakota';
src: url('../fonts/dakota.eot');
src: url('../fonts/dakota.eot?#iefix') format('embedded-opentype'),
url('../fonts/dakota.woff') format('woff'),
url('../fonts/dakota.ttf') format('truetype'),
url('../fonts/dakota.svg#rsuregular') format('svg');
}
#Cobolt, you can try FontSquirrel. http://www.fontsquirrel.com/fontface/generator.
All you need is .otf or .ttf file. Then, FontSquirrel will make the .svg, .eot, .woff for you and create a css file.
After adding these lines into my style.css file I don't get the expected return in frontend / browser. I get a preprocessed version of the css file wich contains resources:/ before the font path. I don't want this preprocessing. How can I deactivate it? I think it's the resources plugin which does this.
I'm using Grails 2.2.
CSS:
#font-face{
font-family:'FontAwesome';
src:url('../font/fontawesome-webfont.eot?v=3.0.1');
src:url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight:normal;
font-style:normal }
Output:
#font-face{
font-family:'FontAwesome';
src:url('resource:/font/fontawesome-webfont.eot?v=3.0.1');
src:url('resource:/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('resource:/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('resource:/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight:normal;
font-style:normal }
I want to exclude only one css file from the preprocessing. Not all css files.
I'm having trouble using the following #font-face declaration to work with my Rails 3.1 app. I put the fonts in the Asset Pipeline in its own folder called "Fonts" alongside images and stylesheets and javascripts
Here is the declaration I used (generated by Font Squirrel.)
#font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive-webfont.eot');
src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('Chunkfive-webfont.woff') format('woff'),
url('Chunkfive-webfont.ttf') format('truetype'),
url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Anyone successfully utilize #font-face on their Rails 3.1 app?
Update
I just read this thread http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/ that said to change url to font-url in the declarations. That didn't seem to work either unfortunately.
You have to add the folder to the assets path (to file config/application.rb), see Rails Guides
config.assets.paths << "#{Rails.root}/app/assets/fonts"
And you should use the asset_path helper:
src: url('<%= asset_path('Chunkfive-webfont.eot') %>');
I know this is an old question, but I just stumbled across this issue with rails 3.2, and after reading the link to the documentation posted previously, there was no need to edit the application.rb. All I needed to do was do the following in my stylesheet (using sass)
#font-face {
font: {
family: 'Junction';
weight: 'normal';
style: 'normal';
}
src: asset-url('Junction-webfont.eot', font);
src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
asset-url('Junction-webfont.woff', font) format('woff'),
asset-url('Junction-webfont.ttf', font) format('truetype'),
asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}
So instead of using url, I used the generic asset-url, which takes 2 arguments, the file and the asset class, in this case 'font'.
From Rails 3.1 and above you can call font-url directly. Like this:
#font-face {
font-family: 'ChunkFiveRegular';
src: font-url('Chunkfive-webfont.eot');
src: font-url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
font-url('Chunkfive-webfont.woff') format('woff'),
font-url('Chunkfive-webfont.ttf') format('truetype'),
font-url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Expect your final css to look like that:
#font-face {
font-family: 'ChunkFiveRegular';
src: url(/assets/Chunkfive-webfont.eot);
src: url(/assets/Chunkfive-webfont.eot?#iefix) format('embedded-opentype'),
url(/assets/Chunkfive-webfont.woff) format('woff'),
url(/assets/Chunkfive-webfont.ttf) format('truetype'),
url(/assets/Chunkfive-webfont.svg#ChunkFiveRegular) format('svg');
font-weight: normal;
font-style: normal;
}
Usually works :)
Using Rails 4.0 (don't know if this is specific to 4, but anyway), I was only able to make it work with url(font_path('font-name.ttf')). Adding the fonts path to the assets path was not necessary either (config.assets.paths << "#{Rails.root}/app/assets/fonts").
So, to me this is what worked:
#font-face {
font-family: 'ChunkFiveRegular';
src: url(font_path('Chunkfive-webfont.eot'));
src: url(font_path('Chunkfive-webfont.eot?#iefix')) format('embedded-opentype'),
url(font_path('Chunkfive-webfont.woff')) format('woff'),
url(font_path('Chunkfive-webfont.ttf')) format('truetype'),
url(font_path('Chunkfive-webfont.svg#ChunkFiveRegular')) format('svg');
font-weight: normal;
font-style: normal;
}
I just updated that article on Atomic Object's Spin blog. Here is the CSS converted (You were looking at the Sass syntax)
#font-face {
font-family: "Merriweather";
src: url(/assets/merriweather-black-webfont.eot);
src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
font-weight: 900;
font-style: normal;
}
I'm using 3.1.1 and have my fonts under vendor/assets/store (Spree implementation). The solutions given here did not work for me and I eventually just tried what ended up being my solution - there was no need for
Here's an example of my src attribute for EOT:
src: url('1617A5_4.eot');
I'm a little bit confused by this but it seems like once assets are compiled the assets are all copied in to their parent folder (assets/store/) at which point the stylesheet can just pick them up.
While this is late, you could use Compass's +font-face mix-in to avoid all this trouble. The mixin helps your life easier by
Not remember the awful caveats of the traditional font-face decleration
It internally handles url_helper and format declarations for you
It's far easier to remember
It is declared the following way madams and gentlemen:
+font-face("#{$font-name}",
font-files("#{$font-name}.woff", woff,
"#{$fontFileName}.ttf", ttf,
"#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);