I have many #font-face rules inside a CSS file that all have one template. This is their template:
#font-face {
font-family:FontName; font-weight: normal; font-style: normal;
src: local('FontName'),
url('http://fonts.example.com/FontName.woff2') format('woff2'),
url('http://fonts.example.com/FontName.woff') format('woff'),
url('http://fonts.example.com/FontName.ttf') format('truetype');
}
and the FontName is different per each font.
Is there a shorter way to write these rules? (Instead of writing them serially in the file.)
A sample part of the file is:
#font-face {
font-family:IRLotus; font-weight: normal; font-style: normal;
src: local('IRLotus'),
url('http://fonts.e900.ir/IRLotus.woff2') format('woff2'),
url('http://fonts.e900.ir/IRLotus.woff') format('woff'),
url('http://fonts.e900.ir/IRLotus.ttf') format('truetype');
}
#font-face {
font-family:IRNazanin; font-weight: normal; font-style: normal;
src: local('IRNazanin'),
url('http://fonts.e900.ir/IRNazanin.woff2') format('woff2'),
url('http://fonts.e900.ir/IRNazanin.woff') format('woff'),
url('http://fonts.e900.ir/IRNazanin.ttf') format('truetype');
}
#font-face {
font-family:IRRoya; font-weight: normal; font-style: normal;
src: local('IRRoya'),
url('http://fonts.e900.ir/IRRoya.woff2') format('woff2'),
url('http://fonts.e900.ir/IRRoya.woff') format('woff'),
url('http://fonts.e900.ir/IRRoya.ttf') format('truetype');
}
/*
And so on ...
*/
I searched for a solution, but not found.
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 have a regular and bold version of a font face implemented like this:
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-regular-webfont.eot');
src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-bold-webfont.eot');
src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-bold-webfont.svg#TeXGyreAdventorbold') format('svg');
font-weight: bold;
font-style: normal; }
body { font-family: 'TeXGyreAdventor'; }
Now I would expect anything told to be bold in the CSS to use the bold version of the font and everything else to use the regular version. Alas this doesn't work. The browser uses the regular version for everything and implements it's own faux style.
If on the other hand I implement the font face like this:
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-regular-webfont.eot');
src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'TeXGyreAdventorBold';
src: url('../fonts/texgyreadventor-bold-webfont.eot');
src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-bold-webfont.svg#TeXGyreAdventorbold') format('svg');
font-weight: normal;
font-style: normal; }
body { font-family: 'TeXGyreAdventor'; }
b,strong {
font-weight: normal;
font-family: 'TeXGyreAdventorBold'; }
Then it works! What gives? I thought the first method is suppose to work. Am I doing something wrong? Is there no way for the browser to understand what is bold and apply the correct version of the font? I don't want to have to declare a new font family for any bit of CSS I want to make bold!
When I attempt to add the code shown below to my CSS3 stylesheet, I get errors
saying that 'format('xxxx')' is not a valid value for the src property. If I remove the space before "format" the error goes away but I don't know if the code is being processed.
I am getting burned out. Does anyone have any ideas?
Thank you,
Yuri
#font-face {
font-family: 'arialregular';
src: url('arial-webfont.eot');
src: url('arial-webfont.eot?#iefix') format('embedded-opentype'),
url('arial-webfont.woff') format('woff'),
url('arial-webfont.ttf') format('truetype'),
url('arial-webfont.svg#arialregular') format('svg');
font-weight: normal;
font-style: normal;
}
Could you try using this below, replace the paths
#font-face {
font-family: 'LatoLight';
src: url('../fonts/Lato-Lig-webfont.eot');
src: url('../fonts/Lato-Lig-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Lato-Lig-webfont.woff') format('woff'),
url('../fonts/Lato-Lig-webfont.ttf') format('truetype'),
url('../fonts/Lato-Lig-webfont.svg#LatoLight') format('svg');
font-weight: normal;
font-style: normal;
}
Try adding:
local('arialregular')
#font-face {
font-family: 'arialregular';
src: url('arial-webfont.eot');
src: local('arialregular'),
url('arial-webfont.eot?#iefix') format('embedded-opentype'),
url('arial-webfont.woff') format('woff'),
url('arial-webfont.ttf') format('truetype'),
url('arial-webfont.svg#arialregular') format('svg');
font-weight: normal;
font-style: normal;
}
Also, this looks like a nice guide for #font-face.
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 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