I have been trying a lot lately to get Glyphicons to work but with no luck. I'm using JSF framework with the following file structure.
Also I modified the CSS in bootstrap.css by removing (..) from every path in the following CSS code to become like this:
#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');
}
When not removing (..), JSF will show the following 2 warnings:
Warning: JSF1091: No mime type could be found for file css/lib/fonts/glyphicons-halflings-regular.woff2. To resolve this, add a mime-type mapping to the applications web.xml.
Warning: JSF1064: Unable to find or serve resource, css/lib/fonts/glyphicons-halflings-regular.woff2.
But still always showing me a strange box instead of the Glyphicon that is supposed to show up?
Help please..
I found the solution by using the following expression to refer to the resources properly:
#font-face {
font-family: 'Glyphicons Halflings';
src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}");
src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}") format('embedded-opentype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff2']}") format('woff2'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff']}") format('woff'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.svg']}") format('svg');
}
The problem is with the fonts folder.
Replace your fonts folder with the one at: https://github.com/twbs/bootstrap and it will work fine.
When I define something like this and I try to upload it to server, the font´s file is not loaded and the font-face is not perfomed in the web. I don´t see anything wrong in my code. I´m sure that the path is correct.
Let´s look at my code:
font-family: 'icon';
src: url('font/websymbolsligaregular.eot');
src: url('font/websymbolsligasegular.eot?#iefix') format('embedded-opentype'),
url('font/websymbolsligasegular.woff') format('woff'),
url('font/websymbolsligasegular.ttf') format('truetype'),
url('font/websymbolsligaregular.svg#WebSymbolsRegular') format('svg');
When I remove everyhting and remains just this line, it works:
font-family: 'icon';
src: url('font/websymbolsligaregular.eot');
Can somebody tell me what should I do ?
I am trying to load this custom font, and cannot get it to work on my server. I am just serving static files. This is the exact syntax I am using, and it works perfectly on my local machine.
#font-face {
font-family: "Telegrafico";
src: url('/assets/fonts/telegrafico.woff') format('woff'), url('/assets/fonts/telegrafico.eot') format('embedded-opentype'), url('/assets/fonts/telegrafico.ttf') format('truetype'), url('/assets/fonts/telegrafico.svg') format('svg');
}
The issues are in all browsers...I cannot figure out for the life of me what is wrong.
Any help is appreciated!
From our chat.
You are using a absolute URL in your CSS.
However on live your site is being served from a sub directory.
(The error here being a mismatch between the model of your local site and the live environment)
Solution is to use a relative path in your CSS instead of a absolute one.
So assuming /assets/css and /assets/fonts
#font-face {
font-family: "Telegrafico";
src: url('../fonts/telegrafico.woff') format('woff'), url('../fonts/telegrafico.eot') format('embedded-opentype'), url('../fonts/telegrafico.ttf') format('truetype'), url('../fonts/telegrafico.svg') format('svg');
}
Should suffice
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);