I am trying to get a custom font to work in the Bones Wordpress theme. My font family is in "library > fonts" folder just like theme instructions.
#font-face {
font-family: 'ColaborateThinRegular';
src: url('library/fonts/ColabThi-webfont.eot');
src: url('library/fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/ColabThi-webfont.woff') format('woff'),
url('library/fonts/ColabThi-webfont.ttf') format('truetype'),
url('library/fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
and I call it in my stylesheet like this:
font-family: 'ColaborateThinRegular';
I have tried a bunch of different fonts and none work. What am I missing here?
I had the same problem on bones and used the relative path to step up one directory to fix it. For you it should be something like this:
#font-face {
font-family: 'ColaborateThinRegular';
src: url('../fonts/ColabThi-webfont.eot');
src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/ColabThi-webfont.woff') format('woff'),
url('../fonts/ColabThi-webfont.ttf') format('truetype'),
url('../fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Hope this helps!
Related
I am using convertapi in order to generate an image from a html page (web 2 jpg) and it is not including the fonts that i am loading from a css file.
Have unsuccessfully tried to include this fonts in the file head.
this is the way im loading the fonts, its working everywhere inthe site but it seems like convertapi is not loading them
#font-face {
font-family: 'Graphik';
src: url('../fonts/Graphik-BlackItalic.eot');
src: url('../fonts/Graphik-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Graphik-BlackItalic.woff2') format('woff2'),
url('../fonts/Graphik-BlackItalic.woff') format('woff'),
url('../fonts/Graphik-BlackItalic.ttf') format('truetype'),
url('../fonts/Graphik-BlackItalic.svg#Graphik-BlackItalic') format('svg');
font-weight: 900;
font-style: italic;
}
Any idea about how to solve this issue?
In case anyone runs into this issue I solved by wraping the #font-face in the document head
<style>
#font-face {
font-family: 'Graphik';
src: url('../fonts/Graphik-BlackItalic.eot');
src: url('../fonts/Graphik-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Graphik-BlackItalic.woff2') format('woff2'),
url('../fonts/Graphik-BlackItalic.woff') format('woff'),
url('../fonts/Graphik-BlackItalic.ttf') format('truetype'),
url('../fonts/Graphik-BlackItalic.svg#Graphik-BlackItalic') format('svg');
font-weight: 900;
font-style: italic;
}
</style>
I am using icomoon to create a custom font but i can not get it to load. I have checked it using font book at it seems to be ok there but I am having trouble loading it.
#font-face {
font-family: 'icomoon';
src: url('icomoon.eot');
src: url('icomoon.eot#iefix') format('embedded-opentype'), url('dilatefonts/icomoon.ttf') format('truetype'), url('icomoon.woff') format('woff'), url('icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
enter image description here
enter image description here
Looks like your style.css and font are in the same folder.
Please try to remove dilatefonts from font path. Example below -
#font-face {
font-family: 'icomoon';
src: url('icomoon.eot');
src: url('icomoon.eot#iefix') format('embedded-opentype'), url('dilatefonts/icomoon.ttf') format('truetype'), url('icomoon.woff') format('woff'), url('icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
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;
}
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've noticed when using web fonts that they can initially can take a second to come up; like if you create a drop down nav menu, when you hover over the menu for the first time the whole menu will appear as just the background color for a second and then the text will appear.
This isn't really ideal and it leads me to believe that webfonts aren't downloaded when the CSS file is loaded, but rather when you first view them on the page.
But on the other hand, I already have the fonts installed on my PC so they shouldn't need to be downloaded, so that lends the question on why do they do this!?
Here is the CSS I use to load my webfonts:
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic-webfont.eot');
src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold-webfont.eot');
src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Light-webfont.eot');
src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Light-webfont.woff') format('woff'),
url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium-webfont.eot');
src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
font-weight: 500;
font-style: normal;
}
When are webfonts downloaded?
Paul Irish made a simple page to test this: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html
It shows that most browsers download fonts when they're used in a page rather than when they're declared in CSS. I believe IE is the exception but I don't have it running to test right now.
The reason for downloading on usage rather than on declaration is to reduce unnecessary network traffic, e.g. if a font is declared but not used.
Can font downloading be avoided?
You're right that if fonts are already installed they shouldn't need to be downloaded. As #Patrick said above, this can be done using local(). It's placed before url() in the CSS and takes the name of the font (the PostScript name is subsequently needed for Safari on Mac OS X). Try out the following change to your CSS:
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: local(Roboto Regular), local(Roboto-Regular),
url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Finally, to reduce font download times, you could make sure you're doing the following:
Putting CSS before JavaScript
Adding far-future Expires headers for
the fonts (so the browser caches them)
GZipping the fonts
Here's a good summary of dealing with font display delays: http://paulirish.com/2009/fighting-the-font-face-fout/