I embedded fonts to a website via #font-face. My code works in Chrome and Safari, but not in Firefox and I don't know why. The fonts are hosted by the same domain and I also put them in the root directory already.
That's the code:
#font-face {
font-family: 'Effra';
src: url('font/Effra-Regular.eot');
src: url('font/Effra-Regular.otf') format('opentype'),
url('font/Effra-Regular.svg') format('svg'),
url('font/Effra-Regular.eot') format('truetype'),
url('font/Effra-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Change your font to:
#font-face {
font-family: 'Effra';
src: url('font/Effra-Regular.eot') format('embedded-opentype');
src: url('font/Effra-Regular.otf') format('opentype'),
url('font/Effra-Regular.svg') format('svg'),
url('font/Effra-Regular.ttf') format('truetype'),
url('font/Effra-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Change font extension .eot to .ttf and include another font file with extension .ttf
#font-face {
font-family: 'Effra';
src: url('font/Effra-Regular.eot');
src: url('font/Effra-Regular.otf') format('opentype'),
url('font/Effra-Regular.svg') format('svg'),
url('font/Effra-Regular.ttf') format('truetype'),
url('font/Effra-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Related
I am trying to call my local fonts from my local folder called fonts but those are not loading in css and below is
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'ProximaNova';
src: url('fonts/ProximaNova-Regular.eot');
src: url('fonts/ProximaNova-Regular.woff2') format('woff2'),
url('fonts/ProximaNova-Regular.woff') format('woff'),
url('fonts/ProximaNova-Regular.ttf') format('truetype'),
url('fonts/ProximaNova-Regular.svg') format('svg');
}
Thanks in Advance
Check your paths, Best practices is to always use a relative paths
Root
index.html
add_ons
style_sheets
style.css
sources
fonts
ProximaNova-Regular.woff2
ProximaNova-Regular.eot
ProximaNova-Regular.woff
ProximaNova-Regular.ttf
ProximaNova-Regular.svg
Should be like,
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'ProximaNova';
src: url('../sources/fonts/ProximaNova-Regular.eot');
src: url('../sources/fonts/ProximaNova-Regular.woff2') format('woff2'),
url('../sources/fonts/ProximaNova-Regular.woff') format('woff'),
url('../sources/fonts/ProximaNova-Regular.ttf') format('truetype'),
url('../sources/fonts/ProximaNova-Regular.svg') format('svg');
}
I'm using Font Squirrel to convert my fonts into useable web versions. I'd like to not have to convert each weight separately and include them in my css (would add alot of bloat with all those calls).
Is there a way to package multiple weights into one font and use the font-weight property to properly call the correct characters?
Trying to avoid the faux-bold and faux-italics here.
Set the font-weight and font-style properties accordingly in your #font-face calls (instead of FontSquirrel's default output where all of them are set to normal and they have separate names for each weight/style instead), and name them all the same font.
Here's an example from a site I built last year:
#font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Book-webfont.eot');
src: url('library/fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Bold-webfont.eot');
src: url('library/fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Italic-webfont.eot');
src: url('library/fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Italic-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot');
src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
Note that FontSquirrel doesn't automatically generate code this way for a reason - which is that some older browsers / user agents do not support font-weight and font-style properties inside of #font-face declarations, so it's more backwards compatible to use the method where you name the fonts differently for each weight and style (CartoGothicRegular, CartoGothicBold, CartoGothicItalic, CartoGothicBoldItalic and so forth).
Also, FontSquirrel actually can do this for you - if you click Expert settings in the Webfont Generator, there is an option under "CSS" called Style Link which will output them in this format.
Here's to back up Ennui's answer:
#font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font.eot');
src: local('☺'), url('fonts/SF Your Font.woff') format('woff'), url('fonts/SF Your Font.ttf') format('truetype'), url('fonts/SF Your Font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Bold.eot');
src: local('☺'), url('fonts/SF Your Font Bold.woff') format('woff'), url('fonts/SF Your Font Bold.ttf') format('truetype'), url('fonts/SF Your Font Bold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Italic.eot');
src: local('☺'), url('fonts/SF Your Font Italic.woff') format('woff'), url('fonts/SF Your Font Italic.ttf') format('truetype'), url('fonts/SF Your Font Italic.svg') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Bold Italic.eot');
src: local('☺'), url('fonts/SF Your Font Bold Italic.woff') format('woff'), url('fonts/SF Your Font Bold Italic.ttf') format('truetype'), url('fonts/SF Your Font Bold Italic.svg') format('svg');
font-weight: bold;
font-style: italic;
}
There's really no way around the creation of separate fonts, but using the font-weight and font-style attributes, you will reduce the call. You just declare font-family once.
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 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/
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