I have my own custom font which I use for the website, and I would like it to be declared as the $baseFontFamily the only problem is that since it's a custom font, I want older browsers to fall back to the default twitter bootstrap font family. Is there any way I can do that?
My main .scss file looks like that:
#font-face
{
font-family: Bartley;
src: url('/Bartley.ttf');
}
$baseFontFamily: Bartley, $sansFontFamily;
#import "bootstrap";
body {
padding-top: 60px;
}
#import "bootstrap-responsive";
Thanks!
There is no "default bootstrap font" but it should work like this:
$baseFontFamily: 'Bartley', Helvetica, Arial, sans-serif !default;
and then you could do ...
$sansFontFamily: $baseFontFamily; // Set "SansFontFamily" with value from "baseFontFamily"
Related
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.
My environment is Rails 3.2.8, and all my stylesheets are found in app/assets/stylesheets in .css.scss format. I'm also using Bootstrap-sass for my application.
The stylesheets do not seem to be loaded at all in internet explorer, and I haven't found a solution after some research.
I provide one css file for example:
File: posts.css.scss
$myFontFamily: 'Nanum Gothic', sans-serif;
$baseFontFamily: $myFontFamily;
#import 'bootstrap';
body {
background-color: #000000;
color: #FFF;
}
In IE9, font, body background, font color are not at all affected by this stylesheet. Any help would be appreciated.
I don't think you need the css and just put posts.scss and I'm assuming all config.assets are set correctly too. i.e., you didn't mess with them.
I have two .scss documents with the following sample code:
tables.scss:
#mixin ftable {
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
}
page.scss:
#projects-listing {
#include ftable;
}
They are required in this order from application.scss:
*= require ./tables
*= require_tree ./partials
where the partials directory contains my page.scss file.
When I load the page, i'm getting an undefined mixin ftable exception.
If you want to use Sass mixins (including compass) you need to use the sass #import function rather than the manifest style require function.
Try this instead in application.css.scss:
#import 'tables'
#import 'page'
#import 'any other files you have'
Order is important - those files with mixins need to be imported first before the files which would use the mixin.