I'm using #font-face on a website. The code works and in Firefox, Chrome, and Opera the #font-face font loads perfectly. The code used is the same that's generated by Font Squirrel. This is the #font-face code:
#font-face {
font-family: 'OpenSansRegular';
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#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
And the font is then called using this code:
font-family: "OpenSansRegular",Arial,sans-serif;
However, in IE9 it still works but is very clunky. When the page is loaded initially, the Arial font is loaded first, and after about 1 or 2 seconds the OpenSansRegular font is then loaded. This obviously spoils the experience of the site as the page is loaded with one font then the other font is booted on to the page after a period of time.
Is there a way to prevent this from happening while still using #font-face?
In IE 9, the use of data: attribute is fully supported. In this case, you can modify the CSS this way:
#font-face {
font-family: 'OpenSansRegular';
src: url('data:font/eot;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAggg=='); /* IE 9 */
font-weight: normal;
font-style: normal;
}
This will make sure only when the CSS completely loads, it loads the fonts too. Hope it helps.
Related
I'm still pretty new to html and css, so I might be overlooking things.
Been entertaining myself trying to create a little website and arrived at embedding a font to it.
It is working in firefox, yet in internet explore it isn't. I do not know about other browsers.
Here is a link to the site. Click the L to go to a second page:
http://librarchive.com/newcat.html.
Due to this there are also some positioning faults, as you can see.
So the font is not correctly working. What do I do?
Here is my css code, i have a .eot and .ttf file of the font:
#font-face{
font-family: libralust;
src: url('Futura_Bk.eot'); /* For IE */
src: local('libralust'), url('Futura_Bk.ttf') format('truetype'); /* For non-IE */
}
body {
font-family: libralust, Verdana, Arial, sans-serif;
text-align:center;
}
I've been searching, but am not experienced enough to understand it all.
Other commentary about site is appreciated too. Thanks for you help!
this a an example of cross-site font embedding has suggested by fontsquirel
#font-face {
font-family: 'OpenSansLight';
src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot');
src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
Now you can figure out what's wrong ?
I'll point another hint : local
For a detailed explanation read this : the-new-bulletproof-font-face-syntax and/or bulletproof-font-face-implementation-syntax
Not all browsers support Font-Face and there are lots of font ext; like eot, svg, woff, ttf.
Try this since you only have eot and ttf:
#font-face{
font-family: libralust;
src: url('Futura_Bk.eot');
src: url('Futura_Bk.eot?#iefix') format('embedded-opentype'),
url('Futura_Bk.ttf') format('truetype');
font-weight: normal; /* thin? normal? bold? */
font-style: normal;
}
I am trying to use Helvetica Neue as the font for my website everywhere so I applied to the body like so
body {
background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/background.jpg");
font-family: "Helvetica Neue" !important;
}
but my font does not appear, it was working at one point but now its not working in Firefox, Chrome, Safari or IE
you can see what I am talking about here
http://inauguralseason.com/
any help would be appreciated,
Thanks,
J
Your #font-face seems to have the font family named as 'helvetica_neueregular' and I don't see a font set for your navigation but anywhere else if you add 'helvetica_neueregular' it loads the font. As far as browser consistency In Chrome dev tools it looks like you are missing some font browser types to provide full browser support.
http://inauguralseason.com/wp-content/themes/twentyeleven/style.css
#font-face {
font-family: 'helvetica_neueregular';
src: url('helveticaneue-medium-webfont.eot');
src: url('helveticaneue-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneue-medium-webfont.woff') format('woff'),
url('helveticaneue-medium-webfont.ttf') format('truetype'),
url('helveticaneue-medium-webfont.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT: This is loading the medium font but it called regular just change to 'helvetica_neuemedium'
You need to upload the font to your web-site and declare the font-face
#font-face
{
font-family: 'Helvetica Neue';
src: url('HelveticaNeue.ttf'),
url('HelveticaNeue.eot'); /* IE9 */
}
and only then you can use it on your web-pages.
I use #font-face for all my projects and for some reason it is not working in IE8. You can view the site here: http://milkandhoneyhospitality.com/
As you can see in normal browsers, the main font is Bebas Neue, and it is being rendered perfectly. BUT, when we bring it into ie8, it uses a fallback font, arial. It even works great in IE7, so so IE8 is the issue (Screenshot at bottom)
My #font-face is typical:
#font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Any idea why this wouldn't be working in IE8 ONLY?
Clearing the IE8 Cache solves the issue
I got the Homestead font from the Lost Type Co-op, which has font-face support. Using Font Squirrel, I got an #font-face package. I included everything and wanted to use the Inline variant as demonstrated here. This is my CSS:
#font-face {
font-family: 'HomesteadInline';
src: url('homestead/homestead-inline-webfont.eot');
src: url('homestead/homestead-inline-webfont.eot?#iefix') format('embedded-opentype'),
url('homestead/homestead-inline-webfont.ttf') format('truetype'),
url('homestead/homestead-inline-webfont.svg#HomesteadInline') format('svg');
font-weight: normal;
font-style: normal;
}
h1 { font-family: 'HomesteadInline'; font-size: 10em}
The font works, but renders horribly in Chrome and Firefox, the only browser that I tested that does it right is IE9.
Below is a comparison screenshot:
Is there any way of fixing this?
I've had issues with the font-weight of homestead across different browsers.
Try adding font-weight:200; when you use homestead
I've been trying to use #font-face on a site, I use the css that font squirrel gives me and it looks good in Safari, IE and on the iphone but in firefox it don´t show up.
I have Firefox 7.0.1 on Mac OSX Snow Leopard.
I've searched the web and tried some of the "solutions" but none has worked.
the site I wanna load this #font-face is http://www.utochinredning.se
Can some one point me in some direction of what might be a solution?
Post your code?
Shot in the dark, but have you included all the appropriate font files? This is a sample of what your #font-face should look like (at least what mine looks like)
#font-face {
font-family: 'Museo300';
src: url('Museo300-Regular-webfont.eot');
src: url('Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Museo300-Regular-webfont.woff') format('woff'),
url('Museo300-Regular-webfont.ttf') format('truetype'),
url('Museo300-Regular-webfont.svg#Museo300') format('svg');
font-weight: normal;
font-style: normal;
}
I have the following font files:
Museo300-Regular-webfont.eot
Museo300-Regular-webfont.svg
Museo300-Regular-webfont.ttf
Museo300-Regular-webfont.woff
Then in your stylesheet:
h1 {
font-family: "Museo300";
font-weight: normal;
}