I am using a font called samarn in my website. The font looks good in Firefox and Google Chrome but in IE, it does not show.
My code is:
#font-face {
font-family: 'SamarkanNormal';
src: url('../fonts/samarn.eot');
src: url('../fonts/samarn.eot?#iefix') format('embedded-opentype'),
url('../fonts/samarn.woff') format('woff'),
url('../fonts/samarn.ttf') format('truetype'),
url('../fonts/samarn.svg#samarn') format('svg');
font-weight: normal;
font-style: normal;
}
#name {
font-family:'SamarkanNormal';
}
try with
#font-face {
font-family: 'font';
src: url('font.eot');
src: local('☺'),
url('font.otf') format('opentype');
}
more here: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
maybe try with some other (than fsq) font-face generator, fe. http://fontface.codeandmore.com/
Related
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'm working on some front-end project and i got an issue with font-face. The font is ok with Firefox but with Chrome it looks ugly, like a Time News Roman..
Here is the code is used to import the font to my Sass project:
#font-face {
font-family: 'aHeadline';
src: local(' Headline'),
url('../fonts/headline.woff') format('woff'),
url('../fonts/headline.ttf') format('truetype'),
url('../fonts/headline.svg') format('svg');
src: url('../fonts/headline.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Here is a live demo http://185.13.36.42/T/foo.html
NB: The fonts comes from the Font Squirrel webfont generator
Just a little syntax change. This will work for you:
#font-face {
font-family: 'headline';
src: url('../fonts/headline.eot');
src: url('../fonts/headline.eot?#iefix') format('embedded-opentype'),
url('../fonts/headline.woff') format('woff'),
url('../fonts/headline.ttf') format('truetype'),
url('../fonts/headline.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
This is my code:
#font-face {
font-family: 'font-icon';
src: url('richstyle-webfont.eot');
src: url('richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('richstyle-webfont.woff') format('woff'),
url('richstyle-webfont.ttf') format('truetype'),
url('richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
I am not able to display the font-icon
I've had lots of trouble with this myself before. Check to see where you downloaded the font files compared to your root folder in relation to the HTML/CSS file.
For example, if all the fonts are in the same location in the root folder, the code you have above is correct.
There are two other scenarios that could arise. The first is if you downloaded them into a newly created folder called fonts that is in a folder within the root, the code would be the following:
#font-face {
font-family: 'font-icon';
src: url('fonts/richstyle-webfont.eot') format('eot');
src: url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/richstyle-webfont.woff') format('woff'),
url('fonts/richstyle-webfont.ttf') format('truetype'),
url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
The other scenario could be if the file is in another folder within your website root directory, but the font files are in fonts that's in a completely separate folder. The way to access it would be to create a different relative link, like the following:
#font-face {
font-family: 'font-icon';
src: url('../fonts/richstyle-webfont.eot') format('eot');
src: url('../fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/richstyle-webfont.woff') format('woff'),
url('../fonts/richstyle-webfont.ttf') format('truetype'),
url('../fonts/richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
It depends on how you point the URL source in the code. Like I said, I've had this problem many times before. Try this first and see if it helps.
The other thing you could do is do the same as this person posted on his answer: #font-face works in IE8 but not IE9
He also added this smileyface-local: src: local("☺"), into the code, so your code would look like this:
#font-face {
font-family: 'font-icon';
src: url('fonts/richstyle-webfont.eot');
src: local("☺"); <-- should've been a semi-colon
src: url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/richstyle-webfont.woff') format('woff'),
url('fonts/richstyle-webfont.ttf') format('truetype'),
url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
Below is a better way of writing out the code. Try this and see how it works for you:
#font-face {
font-family: 'font-icon';
src: local("☺"),
url('fonts/richstyle-webfont.eot') format('eot'),
url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/richstyle-webfont.woff') format('woff'),
url('fonts/richstyle-webfont.ttf') format('truetype'),
url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
Hope this helps!
Try this:
#font-face {
font-family: 'font-icon';
src: url('fonts/richstyle-webfont.eot');
src: local('?'),
url('fonts/richstyle-webfont.otf') format('opentype');
}
or this
#font-face {
font-family: 'font-icon';
src: url('fonts/richstyle-webfont.eot?') format('eot'),
url('fonts/richstyle-webfont.woff') format('woff'),
url('fonts/richstyle-webfontb.ttf') format('truetype');
}
This comes from Paul Irish's Bulletproof font post
Have you tried so:
http://jsfiddle.net/xGLaz/ ?
Or maybe you must change font-family: 'font-icon'; by font-family:'RichStyle';
Here's how to use RichStyle font:
http://richstyle.org/richstyle-theme/theme.css
I mean something like this:
#font-face {
font-family: 'RichStyle';
src: url('{url}/RichStyle.eot');
src: url('{url}/RichStyle.eot?#iefix') format('embedded-opentype'),
url('{url}/RichStyle.woff') format('woff'),
url('{url}/RichStyle.ttf') format('truetype'),
url('{url}/RichStyle.svg#richstyle') format('svg');
font-weight: normal;
font-style: normal;
}
Where {url} is a RELATIVE location of the font.
I want to change the font in my application to a custom font but the following code is not working:
#font-face
{
font-family: "ArnoProBold";
src: url("resources/fonts/ArnoProBold.ttf");
}
#font-face
{
font-family: "ArnoProCaption";
src: url("resources/fonts/ArnoProCaption.ttf");
}
#font-face
{
font-family: "Arn";
src: url("resources/fonts/ArnoProLightDisplay.ttf");
}
Hey #Ritesh please try something like this,
#font-face {
font-family: 'ArnoProBold';
src: url('resources/fonts/your_file.eot');
src: url('resources/fonts/fonts?#iefix') format('embedded-opentype'),
url('resources/fonts/your_file.woff') format('woff'),
url('resources/fonts/your_file.ttf') format('truetype'),
url('resources/fonts/your_file.svg#ArnoProBold') format('svg');
font-weight: normal;
font-style: normal;
}
and so on.
I hope this helps. :)
i have installed webkit Quicksand Light and book in to my CSS file, its all working fine in all browsers on the PC however when i view it on a MAC in any browser the quicksand light web font doesnt display properly comes out like a times new roman type of font. Is it not picking up the font? or is it just not rendering?
cant find any solutions to this problem, been at it all day trying to fix it
CSS:
#font-face {
font-family: 'QuicksandLight';
src: url('/assets/fonts/Quicksand_Light-webfont.eot');
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
/*url('/assets/fonts/Quicksand_Light.otf');*/
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'QuicksandLightOblique';
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot');
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'QuicksandBook';
src: url('/assets/fonts/Quicksand_Book-webfont.eot');
src: url('/assets/fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Book-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Book-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
CSS for QuicksandBook;
body
{
font:13px/24px 'QuicksandBook', Arial,sans-serif;
font-weight: normal;
}
these have been referenced in the head section.
Unfortunately I don't have a Mac available to test on, but some of the pointers listed here might well be worth a shot. Let us know how you get on!
http://paulirish.com/2010/font-face-gotchas/#smiley
I normally load all of my font's at the very top of my css - I dont know if that makes a difference.
Also for future reference you can do your font's like this:
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Light-webfont.eot');
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
/*url('/assets/fonts/Quicksand_Light.otf');*/
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot');
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Book-webfont.eot');
src: url('/assets/fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Book-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Book-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
This means you can reference the font weight in your css rather than having to set the font as oblique. eg
body
{
font: italic lighter 13px/24px 'Quicksand', Arial,sans-serif;
}
That will print the font in Italic in the lighter style