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;}
Related
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';
}
So i have just recently upgraded to the latest bourbon (4.0.2 and sass (3.4.8). Since doing this, the font-face mixin outputs the src surrounded by double quotes, which is invalid and is breaking by fonts.
#include font-face('Avenir', '../fonts/avenir/avenir-regular');
Expected result (no double quotes around src):
#font-face {
font-family: "Avenir";
font-weight: normal;
font-style: none;
src: url('../fonts/avenir/avenir-regular.eot') format('embedded-opentype');
src: url('../fonts/avenir/avenir-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/avenir/avenir-regular.woff') format('woff'), url('../fonts/avenir/avenir-regular.ttf') format('ttf'), url('../fonts/avenir/avenir-regular.svg#avenir') format('svg');
}
Output (double quotes around src):
#font-face {
font-family: "Avenir";
font-weight: normal;
font-style: none;
src: "url('../fonts/avenir/avenir-regular.eot') format('embedded-opentype')";
src: "url('../fonts/avenir/avenir-regular.eot?#iefix') format('embedded-opentype')", "url('../fonts/avenir/avenir-regular.woff') format('woff')", "url('../fonts/avenir/avenir-regular.ttf') format('ttf')", "url('../fonts/avenir/avenir-regular.svg#avenir') format('svg')";
}
The font-face mixin is as follows (see annotated line):
#mixin font-face(
$font-family,
$file-path,
$weight: normal,
$style: normal,
$asset-pipeline: $asset-pipeline,
$file-formats: eot woff ttf svg) {
$font-url-prefix: font-url-prefixer($asset-pipeline);
#font-face {
font-family: $font-family;
font-weight: $weight;
font-style: $style;
#if contains($file-formats, eot) {
// THIS IS THE TROUBLE LINE
src: "#{$font-url-prefix}('#{$file-path}.eot') format('embedded-opentype')";
}
src: font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url-prefix
);
}
}
Is anyone else able to replicate this?
Any ideas are really appreciated.
I'm having an issue with Firefox where one of my fonts isn't loading from my CDN. I already have Access-Control-Allow-Origin set to *.
The font in question only has WOFF and EOT files (due to licensing) whereas the other font that works has WOFF, EOT, TTF and SVG files.
From what I understand WOFF is supported, https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Is there something I'm missing to get this to work?
#font-face {
font-family: 'ProximaNovaReg';
src: url('../fonts/ProximaNova-RegWeb.eot');
src: url('../fonts/ProximaNova-RegWeb.eot#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-RegWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ProximaNovaSbold';
src: url('../fonts/ProximaNova-SboldWeb.eot');
src: url('../fonts/ProximaNova-SboldWeb.eot#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-SboldWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I solved this by removing #iefix but it looks like it should have been ?#iefix. I found more information here: CSS Font Face "?#iefix"
I am using three different fonts. Here is my #fontface
#font-face {
font-family: 'Mikadan-Regular';
src: url('../fonts/mikadan/eot/style_134713.eot');
src: url('../fonts/mikadan/eot/style_134713.eot?#iefix') format('embedded-opentype'),
url('../fonts/mikadan/woff/style_134713.woff') format('woff'),
url('../fonts/mikadan/ttf/style_134713.ttf') format('truetype'),
url('../fonts/mikadan/svg/style_134713.svg#Mikadan-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MuseoSans500';
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot');
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.woff') format('woff'),
url('../fonts/museosans_500/MuseoSans_500-webfont.ttf') format('truetype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MuseoSlab500';
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot');
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.woff') format('woff'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.ttf') format('truetype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.svg#MuseoSlab500') format('svg');
font-weight: normal;
font-style: normal;
}
The first and the third work fine.
The second one is specified for the body tag as:
body, button, input, select, textarea {
font: 16px/1.625 MuseoSans500 "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
_font-size: 1em;
color: #333;
}
This works perfectly fine in Chrome and Safari
However, in Opera 11.50 and Firefox 4.0.1, bad news; the entire font stack does not work, and the font is rendered as plain old serif (yuck!)
I think the problem is with Museo,as when I take Museo out of the font stack it renders correctly.
I'm using these browsers on Windows 7.
You're missing a comma.
font: 16px/1.625 MuseoSans500 "Lucida Grande"
font: 16px/1.625 MuseoSans500, "Lucida Grande"
^^^ add this comma
Although you are missing that comma now, based on what you said, you were having problems with the MuseoSans500 font for body text. When you removed it you were fine. I think the comma is missing now that you are showing us your code.
I would try setting font-family to one choice at a time and see what happens. I would also separate the font-size and line-height just in case thereby isolating the problem, like so:
body, button, input, select, textarea {
font-family: MuseoSans500; /* start with this one by itself */
font-size: 16px;
line-height: 1.625;
color: #333;
}
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