I would like to set a custom font using SASS.
I was able to do that when I was using the default configuration with style.css file but when I try to run the same code on ionic.app.scss it doesn't work.
//style.css
#font-face {
font-family: 'Bariol_Regular';
src: url('../lib/ionic/fonts/Bariol_Regular.eot');
src: url('../lib/ionic/fonts/Bariol_Regular.eot') format('embedded-opentype'),
url('../lib/ionic/fonts/Bariol_Regular.woff2') format('woff2'),
url('../lib/ionic/fonts/Bariol_Regular.woff') format('woff'),
url('../lib/ionic/fonts/Bariol_Regular.ttf') format('truetype'),
url('../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular') format('svg');
}
.login_title {
font-family: "Bariol_Regular";
text-align: center;
}
//ionic.app.scss
$ionicons-font-path: "../lib/ionic/fonts" !default;
//Common
#font-face {
font-family: 'Bariol_Regular';
src: url("../lib/ionic/fonts/Bariol_Regular.eot");
src: url("../lib/ionic/fonts/Bariol_Regular.eot") format('embedded-opentype'),
url("../lib/ionic/fonts/Bariol_Regular.woff2") format('woff2'),
url("../lib/ionic/fonts/Bariol_Regular.woff") format('woff'),
url("../lib/ionic/fonts/Bariol_Regular.ttf") format('truetype'),
url("../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular") format('svg');
font-weight: normal;
font-style: normal;
}
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
.login_title {
font-family: "Bariol_Regular";
text-align: center;
}
The scss get compiled correctly, but then the font of the login-title class doesn't display the right font, but just the ionic default font.
Whats happening is your CSS is being called AFTER the Ionic styles, and they are getting priority over your change.
Place your .login_title, and all future style changes, ABOVE the Ionic #import
Related
I am new at learning HTML5 and CSS. Advanced apology for this very basic question.
I have downloaded a font and saved it in a folder called fonts in my project.
Then created a fonts.css file inside of css folder and put the following code in it.
#font-face {
font-family: 'FiraCode-Regular';
font-weight: normal;
font-style: normal;
src: url('../fonts/FiraCode-Regular.eot');
src: url('../fonts/FiraCode-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/FiraCode-Regular.woff2') format('woff2'),
url('../fonts/FiraCode-Regular.woff') format('woff'),
url('../fonts/FiraCode-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'FireCoda-Light';
font-weight:normal;
font-style: normal;
src: url('../fonts/FireCoda-Light.eot');
src: url('../fonts/FireCoda-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/FireCoda-Light.woff2') format('woff2'),
url('../fonts/FireCoda-Light.woff') format('woff'),
url('../fonts/FireCoda-Light.ttf') format('truetype');
}
Then in the main.css file I added the following css:
body{
font-family:"FiraCode-Regular",Verdana, sans-serif;
font-size: 1.2rem;
}
here is an screen shot of the file hierarchy in my project
now the problem is the font is not working. I would appreciate if anyone can help me here.
add
#import url("./fonts.css");
in your main.css as the first line.
I'm attempting to use a local font for my Polymer Chrome App. I'm trying to use #font-face in CSS. Here's what I got:
#font-face {
font-family: 'robotolight';
src: url('../../assets/fonts/roboto-light-webfont.eot');
src: url('../../assets/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-light-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-light-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-light-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'robotolight_italic';
src: url('../../assets/fonts/roboto-lightitalic-webfont.eot');
src: url('../../assets/fonts/roboto-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-lightitalic-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-lightitalic-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-lightitalic-webfont.svg#robotolight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
Then I use this font-face on an h1 here:
#CaseFiles-h1{
font-family: 'robotolight';
//font-weight: normal; <- no luck
//font-style: normal; <- no luck
}
Unfortunately, the font isn't loaded and I get some default serif font instead.
Any ideas?
I was hoping to keep the font local instead of using Google fonts or something like that.
You have to declate your #font-face outside of your Polymer object. Then you can use it in the polymer template.
<style media="screen">
font-family: 'robotolight';
src: url('../../assets/fonts/roboto-light-webfont.eot');
src: url('../../assets/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-light-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-light-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-light-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;
</style>
<dom-module id="polymer-element>
<template>
<span style="font-familiy: robotolight">Hello</span>
</template>
</dom-module>
A blog post about that is here.
Look on Polymer's font-roboto linked definition. There are font-size defined in absolute measures like 100, 200, etc. Defining font-size: normal; is too rude. Some components may request absolutely or relatively measured font-size. So, try to define all corresponding font-sizes to match all possible requests, even if you won't include all font types (thin, light, medium, etc).
Also, I think you should fix robotolight_italic definition:
#font-face {
font-family: 'robotolight';
/* ... */
font-style: italic;
}
I'm trying to add fontello to my site.
Im calling the font via the instructions with it and have used it before easily. However it just doesn't seem to be working.
Here is my CSS:
#font-face {
font-family: 'fontello';
src: url('fonts/fontello.eot?54081114');
src: url('fonts/fontello.eot?54081114#iefix') format('embedded-opentype'),
url('fonts/fontello.woff?54081114') format('woff'),
url('fonts/fontello.ttf?54081114') format('truetype'),
url('fonts/fontello.svg?54081114#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
I have searched for its solution, and I think, I'm doing everything like the suggestions, but it is still not working. Custom font works on Chrome, IE, but not in Firefox. I have used font face generator to generate fonts and the code. I have placed the #font-face code in header, custom.css file (in theme_root/css/) and also in style.css, but it is not working.
Placed this in header.php:
<style>
#font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
Placed this in style.css:
#font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Placed this in custom.css:
#font-face {
font-family: 'Bebas Neue';
src: url('../fonts/bebasneue.eot');
src: url('../fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('../fonts/bebasneue.woff') format('woff'),
url('../fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Working everywhere, except Firefox. I'm confused
http://tour.khujbo.com
Also, this font works in html pages in Firefox fine. I have used this font in this template and it works on Firefox: http://khujbo.com. Seems to me, that the problem with Firefox and WordPress combination.
What should I do?
I don't think you need to define this font-face everywhere. You can place the CSS only in custom.css. And, you have defined the "Bebas Neue" font-face in your header.php with wrong URL. CSS is trying to get the font (woff, ttf, etc) from http://tour.khujbo.com/fonts/. Please correct your CSS with the right location.
BTW, my suggestion would be, you just place and load the CSS only from custom.css and remove all other definitions.
Hope this will solve your problem.
you must always be sure that the font is legal to use on your site.
However Firefox and Chrome should both support TTF.
get more info from here.
be sure u converted font to all format try this site to do http://everythingfonts.com/font-face and the path should be right !
#font-face {
font-family: 'GE SS Unique';
src: url('../../fonts/GE_SS_Unique_Light.eot');
src: url('../../fonts/GE_SS_Unique_Light.eot?#iefix') format('embedded-opentype'),
url('../../fonts/GE_SS_Unique_Light.woff') format('woff'),
url('../../fonts/GE_SS_Unique_Light.ttf') format('truetype'),
url('../../fonts/GE_SS_Unique_Light.svg#GE_SS_Unique_Light') format('svg');
font-weight: normal;
font-style: normal;}
h1,h2,h3,h4,h5,h6{
font-family: 'GE SS Unique';
}
It is recommended to add ?#iefix to the end of .eot font paths to fix yet another IE erratic behaviour :
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Is it possible to do that using asset_path, but without an ugly + "?#iefix" hack ?
This is how I use it in my projects. Works great in all browsers. It is important to break it to two #font-face declarations.
My fonts.scss:
#font-face {
font-family: 'Webfont';
src: font_url('webfont.eot?') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Webfont';
src: font_url('webfont.woff') format('woff'),
font_url('webfont.ttf') format('truetype'),
font_url('webfont.svg#Webfont') format('svg');
font-weight: normal;
font-style: normal;
}
Please note that if you want to use the SASS helper font_url, you have to have your fonts placed under the assets/fonts directory.
From my experience adding just ? to the font path for >=IE8 instead of anything starting ?# works. But, as mentioned in the beginning, keep the #font-face declaration for IE separate. For the use in SASS helper, just place it at the end of the asset name. It does not break the helper processing.
It appears that asset_path already takes this into account. So:
asset_path 'webfont.eot?#iefix'
does work out-of-the-box ! My bad...
Please try this:
Important:
Please verify your font name is added correctly in all places.
And please verify whether all font face files are available.
Add in Production.rb:
config.host_path = "http://---site url--"
Add following in CSS:
#font-face {
font-family: 'Webfont';
src: url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.eot');
src: url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.eot?#iefix') format('embedded-opentype'),
url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.woff') format('woff'),
url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.ttf') format('truetype'),
url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.svg#Webfont') format('svg');
font-weight: normal;
font-style: normal;
}
if you dont want hard coded font files path, then just use following in css.
#font-face {
font-family: 'Webfont';
src: url('Webfont.eot');
src: url('Webfont.eot?#iefix') format('embedded-opentype'),
url('Webfont.woff') format('woff'),
url('Webfont.ttf') format('truetype'),
url('Webfont.svg#Webfont') format('svg');
font-weight: normal;
font-style: normal;
}
We need to specify full URL path for access font files.
I hope it will help..