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.
Related
I am using a Gulp plugin (gulp-minify-css) to concat then minify my CSS, and for some reason it strips out the entire #font-face rule from the minified CSS. I am also using fonts from Google Fonts, and it doesn't strip this.
The font face rules
#font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?91yt6w');
src:url('../fonts/icomoon.eot?#iefix91yt6w') format('embedded-opentype'),
url('../fonts/icomoon.woff?91yt6w') format('woff'),
url('../fonts/icomoon.ttf?91yt6w') format('truetype'),
url('../fonts/icomoon.svg?91yt6w#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
By all outward appearance, this code is fine. It comes from IcoMoon themselves. I have tried stripping the string after ? in the file url, but that wasn't it.
Anybody have any insight, as we have only just discovered this whilst trying to deploy.
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.
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.
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