I want to apply Open Sans font in my Ionic Project. I have use this code inside my SCSS folder where my custom scss file (settings.sccs and other scss files) are located (demoProject\scss_setting.scss)
#font-face {
font-family: 'Open Sans';
src: url('../www/fonts/opensans-regular-webfont.eot');
src: url('../www/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../www/fonts/opensans-regular-webfont.woff') format('woff'),
url('../www/fonts/opensans-regular-webfont.ttf') format('truetype'),
url('../www/fonts/opensans-regular-webfont.svg') format('svg');
font-weight: 200;
}
body{
font-family: 'Open Sans';
}
fonts are located here(demoProject\www\fonts)
and try to apply on whole body but console of the browser is showing
GET http://localhost:8100/www/fonts/opensans-regular-webfont.woff
:8100/www/fonts/opensans-regular-webfont.ttf:1
GET http://localhost:8100/www/fonts/opensans-regular-webfont.ttf
I believe you're going too far back in the directory chain.
I think you want something more like this:
#font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans-regular-webfont.eot');
src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans-regular-webfont.woff') format('woff'),
url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
url('../fonts/opensans-regular-webfont.svg') format('svg');
font-weight: 200;
}
body{
font-family: 'Open Sans';
}
Here is a tutorial for adding Font Awesome into your project, which is a custom font:
https://www.thepolyglotdeveloper.com/2014/10/use-font-awesome-glyph-icons-ionicframework/
Let me know if that helps you.
Regards,
Your fonts should be located in
demoproject/www/lib/ionic/fonts
and then referred to from the css (in it's default location www/css/stylesheet.css like so:
#font-face {
font-family: 'Open Sans';
src: url('../lib/ionic/fonts/opensans-regular-webfont.eot');
src: url('../lib/ionic/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../lib/ionic/fonts/opensans-regular-webfont.woff') format('woff'),
url('../lib/ionic/fonts/opensans-regular-webfont.ttf') format('truetype'),
url('../lib/ionic/fonts/opensans-regular-webfont.svg') format('svg');
font-weight: 200;
}
body{
font-family: 'Open Sans';
}
Related
For some reason my #font-face isn't working.
#font-face{
font-family: "Manteka";
src: url('../fonts/manteka.ttf');}
I'm trying to use it for my navigation links
#nav a {
font-family: "Manteka", Verdana, Tahoma;}
Quick folder layout
My CSS file is in a 'css' folder inside 'www'
index file is located in 'www'
font file is inside 'fonts' folder inside 'www'
Downloaded the files from another source and used this
#font-face { /* The manteka Font, use it by call font-family directly */
font-family: 'manteka';
src: url('../fonts/manteka.eot'); /* For IE */
src: url('../fonts/manteka.ttf') format('truetype'), /* For Chrome and Safari */
url('../fonts/manteka.woff') format('woff'); /* For FireFox */}
Works fine now, thanks for the help
Did you try adding format('truetype')
#font-face{
font-family: "Manteka";
src: url('../fonts/manteka.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Also, try dropping the quotes on the usage:
#nav a {
font-family: Manteka, Verdana, Tahoma;}
I'm loading two fonts with font-face on my css.
The first font works on IE7/8, the second one doesn't. The css code is identical for both fonts.
Any idea how to fix that? :(
Here is the html page : http://canapin.com/web/fonts.html
And the css : http://canapin.com/web/fonts.html
#font-face {
font-family: 'nexa_bold';
src: url('./fonts/Nexa Bold.eot?');
src: url('./fonts/Nexa Bold.woff') format('woff'),
url('./fonts/Nexa Bold.ttf') format('truetype'),
url('./fonts/Nexa Bold.svg') format('svg');
}
#font-face {
font-family: 'signika';
src: url('./fonts/Signika-Regular.eot?');
src: url('./fonts/Signika-Regular.woff') format('woff'),
url('./fonts/Signika-Regular.ttf') format('truetype'),
url('./fonts/Signika-Regular.svg') format('svg');
}
h1 {
font-family: 'nexa_bold';
}
h1.alt {
font-family: 'signika';
}
for some reason the font is not rendering in IE 8 and under. I've applied the IE fix (.eot?#iefix) which always has worked but for some reason it's not this time. Anybody know what's going wrong or have had an issue like this as well? Here's what I have:
#font-face {
font-family: 'rrb-main';
src: url('./assets/rrb-main.eot');
src: url('./assets/rrb-main.eot?#iefix') format('embedded-opentype'),
url('./assets/rrb-main.woff') format('woff'),
url('./assets/rrb-main.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Try using double quotes around your tags like so:
#font-face {
font-family: "rrb-main";
src: url("./assets/rrb-main.eot");
src: url("./assets/rrb-main.eot?#iefix") format("embedded-opentype"),
url("./assets/rrb-main.woff") format("woff"),
url("./assets/rrb-main.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I don't know why but sometimes that works. This tag should work since you have the EOT version of the font.
I created font-face using http://www.fontsquirrel.com/fontface/generator. I have created myriad pro semi bold and italic fonts using it for the website. The fonts are coming fine in PC machine but on the Mac the links are not looking as Myriad pro semibold.
Here is the link to the site where you can see.
http://www.vr2020.com/gtgtoursdev/index.php
font-face code :
#font-face {
font-family: "MyriadProSemibold";
font-style: normal;
font-weight: normal;
src: url("myriadpro/myriadpro-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("myriadpro/myriadpro-semibold-webfont.woff") format("woff"), url("myriadpro/myriadpro-semibold-webfont.ttf") format("truetype"), url("myriadpro/myriadpro-semibold-webfont.svg#MyriadProSemibold") format("svg");
}
#font-face {
font-family: "MyriadProSemiboldCondensed";
font-style: normal;
font-weight: normal;
src: url("myriadpro/myriadpro-semiboldcond-webfont.eot?#iefix") format("embedded-opentype"), url("myriadpro/myriadpro-semiboldcond-webfont.woff") format("woff"), url("myriadpro/myriadpro-semiboldcond-webfont.ttf") format("truetype"), url("myriadpro/myriadpro-semiboldcond-webfont.svg#MyriadProSemiboldCondensed") format("svg");
}
#font-face {
font-family: "MyriadProSemiboldItalic";
font-style: normal;
font-weight: normal;
src: url("myriadpro/myriadpro-semiboldit-webfont.eot?#iefix") format("embedded-opentype"), url("myriadpro/myriadpro-semiboldit-webfont.woff") format("woff"), url("myriadpro/myriadpro-semiboldit-webfont.ttf") format("truetype"), url("myriadpro/myriadpro-semiboldit-webfont.svg#MyriadProSemiboldItalic") format("svg");
}
#font-face {
font-family: "MyriadStdTilt";
font-style: normal;
font-weight: normal;
src: url("myriadpro/myriadstd-tilt-webfont.eot?#iefix") format("embedded-opentype"), url("myriadpro/myriadstd-tilt-webfont.woff") format("woff"), url("myriadpro/myriadstd-tilt-webfont.ttf") format("truetype"), url("myriadpro/myriadstd-tilt-webfont.svg#MyriadStdTilt") format("svg");
}
Thanks & Regards,
Karunakar Gowni
This post: CSS #font-face not working with Firefox, but working with Chrome and IE may help. I know it relates to Firefox, but you may find the solution there.
Update: Also, you're calling the stylesheet with your #font-face property in it after you call the stylesheet which you're using it in(voucher2.css). From what I saw you don't call any Myriad font in "menustyle.css".
iam using #font-face css function to use custom fonts. They look great in all browsers (ie,chrome,safari, opera) on windows and mac apart from any version of firefox mac.
Basically, the font is adding padding above and below the font on all h1 h2 and p tags using this font on firefox mac only. however when using the same version of firefox on a windows machine, the font renders completely fine without any extra padding.
On all other browsers on mac and pc, the font renders completely fine without this extra padding. Its just on firefox mac!
Here is the #font-face css code ive been using, generated by font-squirrel using the recommended settings.
#font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont-webfont.eot');
src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont-webfont.woff') format('woff'),
url('telegrafico-webfont-webfont.ttf') format('truetype'),
url('telegrafico-webfont-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont-webfont.eot');
src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont-webfont.woff') format('woff'),
url('telegrafico-webfont-webfont.ttf') format('truetype'),
url('telegrafico-webfont-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont.eot');
src: url('telegrafico-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont.woff') format('woff'),
url('telegrafico-webfont.ttf') format('truetype'),
url('telegrafico-webfont.svg#webfontRUJiw7XW') format('svg');
font-weight: normal;
font-style: normal;
}
this is an example of the css i've been applying to the h1 h2 tags
#logo h1 {
font-family:'TelegraficoRegular';
font-size:60px;
margin:0;
padding:0;
}
Even with stating margin:0 and padding:0 it still adds padding or something on top and bottom but just in firefox mac.
its very baffling since its on one browser on one platform.When if it was the problem of the font file you would expect to see the problem replicated in other browsers.
I would really appreciate any help. Thank-you
Jack