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
Related
I know so many issues were reported for font, but after looking through all of them still i am not able to find solution for this issue. I am creating an mvc .NET application. have moved all the font files in font folder and changed my css to. Since I am facing this issue on visual studio, i am unable to provide an working example.
#font-face {
font-family: 'ui-grid';
src: url('../fonts/ui-grid.eot');
src: url('../fonts/ui-grid.eot#iefix') format('embedded-opentype'), url('../fonts/ui-grid.woff') format('woff'), url('../fonts/ui-grid.ttf') format('truetype'), url('../fonts/ui-grid.svg?#ui-grid') format('svg');
font-weight: normal;
font-style: normal;
}
screenshot for issue in Chrome:
screenshot for issue in Firefox:
screenshot for issue in internet explorer:
UI Grid version : 4.0.2
You need to download your required .woff file and .ttf file from ui-grid resources to the dir where your ui-grid.css is
https://github.com/angular-ui/bower-ui-grid/blob/master/ui-grid.ttf
https://github.com/angular-ui/bower-ui-grid/blob/master/ui-grid.woff
Or in your .html file, you directly point to the official ui-grid site so you don't need to reference files. They will take care themselves
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"/>
So 2 things you should do if the above is not your option
1. verify paths url('../fonts/ui-grid.woff'), url('../fonts/ui-grid.ttf')
2. You need to verify whether your MIME type is correct returned by your format ()'s and supported by your internet server. Have you added these
1. MIME 'woff' is APPLICATION/X-WOFF and
2. MIME for 'ttf's is APPLICATION/octet-Stream
to your server? It's got to be these 2 possibilities, either your path is not correct or your server config MIME is not equipped.
The original ui-grid.css has
src: url('ui-grid.eot#iefix') format('embedded-opentype'), url('ui-grid.woff') format('woff'), url('ui-grid.ttf') format('truetype'), url('ui-grid.svg?#ui-grid') format('svg');
but yours are
url('../fonts/ui-grid.woff'), url('../fonts/ui-grid.ttf')
so, do you really have ui-grid.woff on your fonts path?
I'm researching how to add custom fonts to my Rails app, e.g. by adding a fonts folder in the assets folder - and I cannot find an "official" Rails way on how to do this.
Yes, there are plenty of questions/answers here on SO about the matter, all seemingly with their own hacks. But shouldn't such a common practice go under Rails' famous "convention over configuration"?
Or if I've missed it - where is the documentation reference on how to organize fonts in a Rails app?
Yes the link given will explain it well, however if u need another detailed explanation then here it is
Firstly to use custom fonts in your app you need to download font files, you can try https://www.1001freefonts.com/ and look for fonts
Few of the most popular font file formats are mainly .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)
You can move the downloaded fonts to your app folder under app/assets/fonts/
After downloading the file you need to "declare" the fonts you will be using in your css like this
#font-face {
font-family: "Kaushan Script Regular";
src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}
Finally you can use the font-family that you just declared wherever you want like this
#e-registration {
font-family: "Kaushan Script Regular";
}
Hope this helps.
Just did it...
Download and save the font files (eot, woff, woff2...) in your
assets/fonts/ directory
In your config/application.rb add this line config.assets.paths
<< Rails.root.join("app", "assets", "fonts")
What this does is it
precompiles your fonts folder just as it does by default with your
images, stylesheets etc.
and make sure this line is set to true config.assets.enabled =
true
In your sass/scss or even inline with <script> tag
#font-face { font-family: 'Bariol Regular'; src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg'); font-weight: normal; font-style: normal; }
Note that you should use the font-url helper instead of css' url to address the fingerprinting done by Rails when it precompiles the assets
Finally, set the font-family in your CSS files
body {
font-family: 'Bariol Regular', serif;
}
FREE TIP:
This being said, the best way in terms of performance is to set this up with JS so that these fonts get loaded asynchronously. Check this loader: https://github.com/typekit/webfontloader
I had some trouble with the approaches listed above, because the production css was not pointing to the compiled ttf font, so I then successfully used this alternative approach borrowed from https://gist.github.com/anotheruiguy/7379570:
Places all font files in assets/stylesheets/fonts. e.g. assets/stylesheets/fonts/digital_7.ttf.
I defined in a .scss file that we use:
#font-face {
font-family: 'Digital-7';
src: asset-url('fonts/digital_7.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I leveraged the custom font in other .scss files:
.digital-font {
font-family: 'Digital-7', sans-serif;
font-size: 40px;
}
This said, a much cleaner way of doing this is to put the font definition (digital_7_mono.ttf in this example) on a separate site.
If you are using Cloudfront, for example, in a Cloudfront directory called my_path, upload your font files, then define a css file (e.g. digital_fonts.css)
#font-face {
font-family: 'Digital-7-Mono';
font-weight: normal;
font-style: normal;
src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}
In your html, inside the <head> tag, add:
The only way that worked for me was this:
#font-face {
font-family: 'Vorname';
src: asset-url('Vorname.otf') format('truetype'),
asset-url('Vorname.ttf') format('truetype');
}
Just put fonts under app/assets/fonts, and modify url('Your Font Path') to font-url('Your Font Path') in your scss. Aslo Asset Pipeline will auto precompile fonts into public/assests folder.
check here for more detail:
https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass
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.