I'm having trouble including fonts for my rails app. I tried following the advice from this post: Using fonts with Rails asset pipeline, but I'm still confused.
I'm trying to add this font. I made an app/assets/fonts folder and added the fonts to it. I changed production.rb accordingly.
I'm confused about declaring my fonts like so:
#font-face {
font-family: 'Icomoon';
src:url('icomoon.eot');
src:url('icomoon.eot?#iefix') format('embedded-opentype'),
url('icomoon.svg#icomoon') format('svg'),
url('icomoon.woff') format('woff'),
url('icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
These are my 4 RobotoSlab fonts:
RobotoSlab-Bold.ttf
RobotoSlab-Light.ttf
RobotoSlab-Regular.ttf
RobotoSlab-Thin.ttf
They all have dashes in the names. So what do I write instead of iconmoon.eot? RobotoSlab-Regular.ttf or RobotoSlab.ttf?
Also, I'm confused about where I should address the .eot part, and where I should address the .ttf part. In the example above, the .eot part was addressed first, and then the .ttf part was addressed along with all the other formats. But the default extension for my font is .ttf, so does that change things?
Also, I'm confused about which font files I'm supposed to include. Most fonts on http://www.fontsquirrel.com/ have multiple font files to download (in order to address variations of bold and italics). Are you supposed to link to all of them in #font-face?
Thanks for the help.
There are a number of things which could be a problem:
Where are your font files actually stored?
If they are in /assets/fonts, you need to reference that path directly:
#font-face {
font-family: 'Icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Did you use stylesheet.css from Font-Squirrel?
Stylesheet.css has all the code for the different fonts you've just turned into #font-face elements. You mentioned you have several fonts which are not included in your css file -- the rendered fonts from front-squirrel will have the relevant code contained in the stylesheet.css which comes with them
You just need to change the references in the stylesheet to your own app, and include the code in a .css file of your own
I have custom font file. How do I add it the grails project. Can I use ${resource(dir: , file:'')} for adding it?
This answer is not limited to Grails, since you use CSS to do it. There's this related question in SO, it explains that you need to use #font-face.
You can use relative paths and let Grails resources handle it you:
Put your font in web-app/fonts (create the directory)
Add to your css (considering the file Delicious-Roman.ttf, replace to yours):
#font-face { font-family: Delicious; src: url('../fonts/Delicious-Roman.ttf'); }
#font-face { font-family: Delicious; font-weight: bold; src: url('../Delicious-Bold.ttf'); }
Download your font from any website.
got to webFont Generator.
It will generate a zip file . in which got to your .css file and copy and paste code in your web within style tag. also paste all file within same directory. it will run all browser.
#font-face {
font-family: 'Philosopher';
src: url('WebRoot/fonts/philosopher-regular.eot');
src: url('WebRoot/fonts/philosopher-regular.eot?#iefix') format('embedded-opentype'),
url('WebRoot/fonts/philosopher-regular.woff') format('woff'),
url('WebRoot/fonts/philosopher-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
font-size: 13px;
font-family: "Philosopher";
}
this code snippet is true for philospher font. You can use any font based on this example.
Enjoy.
Put it into web-app dir.
You can create directory like web-app/fonts and reference it as /fonts/yourfont.ttf or as ${resource(dir: 'fonts', file: yourfont.ttf}
Notice that the first works only if you run your application in a root context.
Does anybody know how to install some of my custom font into rails and use it in my application to show in view.html.erb (for example) so everybody can see text written in new font?
I am using rails 3
EDIT:
I see I have to correct myself. I use font .ttf as that is the only one I have found. if that makes any difference.
I would like to do that using classic CSS or with use of HAML
Create a folder called fonts in app/assets/ then move all your custom fonts there (example).
Restart your server for the new assets to be available and create a stylesheet to declare your font-faces, for example app/assets/stylesheets/fonts.css, than write:
#font-face {
font-family: 'My Custom Font';
src: font-url('mycustomfont-regular.eot');
font-weight: normal;
font-style: normal;
}
// bold
#font-face {
font-family: 'My Custom Font';
src: font-url('mycustomfont-bold.eot');
font-weight: bold;
font-style: normal;
}
// italic
#font-face {
font-family: 'My Custom Font';
src: font-url('mycustomfont-italic.eot');
font-weight: normal;
font-style: italic;
}
(example).
Now you can setup your custom font using font-family: "My Custom Font"
Unless you want Rails to render an image in a particular font that is then sent to the client, what you're looking for is Web Fonts where you specify in CSS how text should be rendered.
Create a CSS with this:
#font-face{
font-family: Sabon;
src: asset-url('Sabon-Roman.otf', font);
}
and place your font in app/assets/fonts.
It works for OTF fonts.
I'm using font awesome in my project(mvc/asp.net). My problem is, I was debugging the project and check on localhost, there was no problem with font awesome icons. But when published the website and check on web, instead of icons, i saw small boxes. I'm sure that it's placed in right directory(where css files placed).
I couldn't find any proper solution.
By the way there is also no problem with buttons. They are all ok but icons are gone.
Thanks
I've just loaded your webpage and checked the net tab of firebug.
your following urls returned a 404:
http://www.senocakonline.com/Content/font/fontawesome-webfont.woff
http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf
i would assume that those being missing is the reason your icons aren't displaying.
UPDATE: 23.10.2015
to make it available just add this code to your WebConfig:
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
Why font-awesome works on debug mode but not on IIS?
In Visual Studio, by default, some font files are not including during Publish:
.eot
.json
.ttf
.woff
This is because their build action is set to None, this is by default (on MVC, not sure on WebForms). You must go to the affected file's properties and set it from "None" to "Content".
This is how I solved it (not by manually dragging the files as some may suggest)
Credits goes to this guy: http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html
Another solution that solved this issue for me can be found here: https://stackoverflow.com/a/12587256/615285
Quoting from there:
The issue is most likely that the icons/images in the css files are using relative paths, so if your bundle doesn't live in the same app relative path as your unbundled css files, they become broken links.
The easist thing to do is to have your bundle path look like the css directory so the relative urls just work, i.e:
new StyleBundle("~/Static/Css/bootstrap/bundle")
We have added support for this in the 1.1beta1 release, so to automatically rewrite the image urls, you can add a new ItemTransform which does this rebasing automatically.
bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
"~/Static/Css/bootstrap/bootstrap.css",
"~/Static/Css/bootstrap/bootstrap-padding-top.css",
"~/Static/Css/bootstrap/bootstrap-responsive.css",
"~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));
I had the same problem. The solution:
Open CSS file and delete the current font-face section and replace with these:
#font-face {
font-family: FontAwesome;
src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */
url('/Content/fonts/fontawesomewebfont.svg'),
url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */
font-weight: normal;
font-style: normal;
}
(change the font-face values as you want)
Copy your ttf font file on your desktop then convert to eot
http://www.kirsle.net/wizards/ttf2eot.cgi
Convert ttf font file to svg
http://www.freefontconverter.com/
Convert ttf font file to woff (optional)
http://ttf2woff.com/
Drag and drop these all fonts (ttf, eot, svg, woff... ) to your file location when Visual Studio 2012 is open.
Publish your project
It depends on this code line in BundleConfig:
BundleTable.EnableOptimizations = true;
if it is true, you have to change your Font files's path;
../ is shows root path, main folder of your project. And then you have to write rest of the path.
Mine. When it's true:
font-family: 'Icons';
src:url('../_include/css/fonts/Icons.eot');
src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'),
url('../_include/css/fonts/Icons.woff') format('woff'),
url('../_include/css/fonts/Icons.ttf') format('truetype'),
url('../_include/css/fonts/Icons.svg#Icons') format('svg');
font-weight: normal;
font-style: normal;
When it's false:
font-family: 'Icons';
src:url('fonts/Icons.eot');
src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'),
url('fonts/Icons.woff') format('woff'),
url('fonts/Icons.ttf') format('truetype'),
url('fonts/Icons.svg#Icons') format('svg');
font-weight: normal;
font-style: normal;
It is also a MIME TYPE problem in the IIS, just add the file extension .woff and it will work
this worked for me :
<
link href="~/Content/font-awesome-4.2.0/css/font-awesome.css" rel='stylesheet' type='text/css' />
I had to link the Directly URl
In my ASP.NET MVC project with bundling enabled in BundleConfig.cs what worked was this:
Open the file font-awesome.css and change #font-face to this:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
I had to add ../ before each url.
I had the same problem. Fonts were shown on local properly but when I uploded it to server, only blank squares were shown.Sometimes it may happen because the filename mentioned in FontAwesome CSS file src attribute is different from the actual font file name. In my case I found it like this in fontawesome css file:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),
url('../font/fontawesome-webfont_aea8981c.ttf?v=3.2.1') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
But the actual font file names wese like these-
font/fontawesome-webfont_2d2816fe.eot
font/fontawesome-webfont_aea8981c.eot
font/fontawesome-webfont_aea8981c.ttf
font/fontawesome-webfont_aea8981c.woff
though the name didn't match properly in css file after underscore, it was working fine on local. So it was hard to tell what was the probable cause for that. When I edited the name of file in FontAwesome css file src to the exact actual names, it worked.
Nothing realy worked for me.
I have a Webform page that hosts an angulular application.
The angular application uses the webfonts.
The trick with CssRewriteUrlTransform() was the right direction, but then I found this extension for bundleing that did the final solution!
AspNetBundling
You don't have to use the hole extension, just copy the CssRewriteUrlTransformFixed class and use it instead of the original.
I have tried all suggestions above, and none of them work. Then I tried to move font CSS file to different CSS file, and magic has happen. Everything start to work without any problems. Note you can later on bundle new CSS file through your bundle file.
how to emebed a font using #font-face on rails:
my fonts are located in:
/vendor/assets/stylesheets/fonts/custom-font-lists-here.eot
my stylesheet that contain a #font-face is inside:
/vendor/assets/stylesheets/fonts.css
I am using this right now
#font-face {
font-family: 'ArimoRegular';
src: url('<%= asset_path('fonts/arimo-regular-webfont.eot') %>');
src: url('<%= asset_path('fonts/arimo-regular-webfont.eot') %>'+'?#iefix') format('embedded-opentype'),
url('<%= asset_path('fonts/arimo-regular-webfont.woff') %>') format('woff'),
url('<%= asset_path('fonts/arimo-regular-webfont.ttf') %>') format('truetype'),
url('<%= asset_path('fonts/arimo-regular-webfont.svg') %>#ArimoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I wonder if this is right,
Any suggestion are welcome,
Thank you
You shouldn't need the fonts/ portion of the file path. The app/assets/fonts directory should already be included in asset_path, so you should be able to use this:
<%= asset_path('arimo-regular-webfont.eot') %>
I don't know why this happens, but I've heard of people having issues with the assets/fonts directory not being in the asset pipeline so you have to add it manually. If the above doesn't work for you, try added the directory manually by putting the following in config/application.rb:
config.assets.paths << "#{Rails.root}/app/assets/fonts"
While using asset_path helper, you should append .erb to your font.css so it becomes font.css.erb. A better solution would be to use asset helpers from sass-rails or less-rails gems, in your case font-url.
More about it: sass-rails features