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.
Related
I checked all question regarding this issue here but no luck. Issue is only with IE7 and above, all other browsers it's working fine.
Below is my CSS code
#font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');
}
also tried
#font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');
}
and here is the test link http://bit.ly/Rtoxgw
I've had a similar problem where IE ignored the font. The problem then was that the font-family name I used contained too many characters for IE, but worked fine for all the other browsers.
Try shorten down the name HelveticaNeue23UltraLightExtended.
#iefix after question mark states that, you need that url to search a query parameter that will fool IE and let you use website without wasting cache.Many people call it a cache bursting trick.(you can try anything after # in front of question mark, its just a cache burst technique .)
You need to change the order in which you write the fonts to get data sequentially out of fonts, and if you do incorrect ordering ,you may end up with errors in reading "eot" files, permission install on "ttf" format files
try this code, this should work, also you need to locally define this new font as a resource[rename resource files to short names]
Also change this when you use it in css, or style sheets.
Also shorten the font name...
try this:
HelveticaNeueule
#font-face {
font-family: HelveticaNeueule;
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.eot?#iefix') format('embedded-opentype'),
src: local(HelveticaNeueule)
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.ttf') format('truetype'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.woff') format('woff'),
font-weight: bold
The font parameters like bold, italics can be specified later at end of above block as shown,
Hope this will fix your problem...
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
**My code**
#font-face {
font-family: 'certificateitalic';
src: url('/webfontkit-20140113-085051/certificateitalic-webfont.eot');
src: url('/webfontkit-20140113-085051/certificateitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('/webfontkit-20140113-085051/certificateitalic-webfont.woff') format('woff'),
url('/webfontkit-20140113-085051/certificateitalic-webfont.ttf') format('truetype'),
url('/webfontkit-20140113-085051/certificateitalic-webfont.svg#certificateitalic') format('svg');
font-weight: normal;
font-style: normal;
}
this is the code which is used in generatecertificate.html.erb
Maybe its not just the fonts, check that when you create the pdf, you are receiving all the assets you need.
Las time i checked i had to use a helper provided by wkhtmltopdf called wkhtmltopdf_stylesheet_link_tag instead of the classic stylesheet_link_tag that you should have in your view/partial/layout.
EDIT: Actually, im using wicked_pdf gem (https://github.com/mileszs/wicked_pdf), and there you have helpers like wicked_pdf_stylesset_link_tag, and solve most of the configuration of wkhtmltopdf config.
If you follow the configuration as explained there, and your font face is working correctly on the webpage, it shouldn't have any troubles in pdf generation.
Im working on a rails app trying to configure fonts with rails 3.1 and the asset pipeline.
I just took a look at this post
Asset pipeline, compass font-face and eot?iefix call to the font
and using the example i get a syntax issue from sass.
My code is as follows:
/* #font-face kit by Fonts2u (http://www.fonts2u.com) */
#font-face {
font-family: 'Coamei Bold';
src: font_url('fonts/COAMEI_B.eot');
src: url('<%= asset_path('fonts/COAMEI_B.eot')+"?#iefix" %>') format('embedded-opentype'),
font_url('fonts/COAMEI_B.woff') format('woff'),
font_url('fonts/COAMEI_B.ttf') format('truetype'),
url('<%= asset_path('COAMEI_B.svg')+"#Coamei-Bold" %>') format('svg');
font-weight:normal;
font-style:normal;
}
For some reason i get the error
Sass::SyntaxError: Invalid CSS after "...'fonts/COAMEI_B": expected ")", was ".eot')+"?#iefix..."
Is there something im missing in my css file. Any help would be greatly appreciated.
Thanks in advance