Im having some trouble with the #font-face selector, I have the following...
#font-face {
font-family: 'MuseoSans-700';
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot?#iefix') format('embedded-opentype'),
url('style_159306.woff') format('woff'),
url('style_159306.ttf') format('truetype');
}
Only my fonts arent being rendered and instead im being shown my fallback, arial.
If i paste the url to the font into my browser it asks me to download so i know the links correct, is there something im doing wrong in the above?
Im calling the font using...
h1 {
color:#272727;
font:108px 'MuseoSans-700',Helvetica,Arial,sans-serif;
letter-spacing:-7px;
}
Thanks
Check out this article on bullet-proof #font-face syntax. http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
You also didn't specify which browsers it's working or not working in so I assume it's not working in any of them.
.eot is for internet explorer.
Try .otf
So in practice you need to have both, something like
e.g.
#font-face {
font-family: 'MuseoSans-700';
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.otf');
}
A good tutorial is here: http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/
Strelok's reference to Paul Irish's article is also very good.
Related
Web font is not rendered properly in firefox. It working fine for Chrome browser.
Below is my CSS code,
#font-face {
font-family: 'DINm';
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.eot');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.eot?#iefix') format('embedded-opentype');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.woff') format('woff');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINComp-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have referred below url,
CSS Font-Face url not working?
How can i resolve this problem?
Thanks.
Those links are to font files that don't allow cross-site linking. Chrome doesn't follow that part of the specification, but Firefox does.
See the "published site" part https://stackoverflow.com/a/3704578/720912 for how to configure the server to allow linking to the fonts.
change the code from
format ('truetype');
to
format ('opentype');
and this should work for you.
That was listed in the article referenced from the other page near the bottom and it worked for me. This fiddle shows the working example: http://jsfiddle.net/Phlume/CMv8G/1/
You should see this:
The article also mentioned that for otf or ttf fonts you can leave the format section off entirely -- it is optional as the format is open type.
I can't make IE 8 and below (need preferably upto IE 6) render a font I have on my server.
The code I'm using is the following:
#font-face {
font-family:omnes;
src:url('fonts/Omnes-Regular.eot') format('eot'),
url('fonts/Omnes-Regular.otf') format('otf'),
url('fonts/Omnes-Regular.ttf') format('truetype');
}
This seems to work for all other browsers, how can I approach this?
You can see a live demo here:
http://trufavarela.com/uruware/
Try this:
#font-face {
font-family: 'omnes';
src: url('fonts/Omnes-Regular.eot');
src: url('fonts/Omnes-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Omnes-Regular.ttf') format('truetype');
}
You probably do not need otf file format. This code is likely to work, because when IE tries getting anything other, than the eot format, the ? simply makes it think the rest of the string is a parameter, as in a php file.
Also, you should probably include woff and svg formats of the font as well. And use Font Squirrel, does all the job for you.
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
I have added a font to a site, added the CSS and uploaded the font files and it is working in IE but not in Firefox. Why is that?
CSS:
#font-face {
font-family: 'MyFont';
src: url('MyFont.eot');
src: url('MyFont.eot?#iefix') format('embedded-opentype'),
url('MyFont.woff') format('woff'),
url('MyFont.ttf') format('truetype'),
url('MyFont.svg#MyFontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
label { font-family: 'MyFont'; font-size: 20px; }
The label was just a test, but it's working. The font files are in the same directory as the CSS.
I've tried almost everything, and its still not working....
Does anybody know what's wrong? Any help appreciated.
In order:
Check if the font is on Google Web Fonts. If it is, use that version, don't embed your self (for ease of use, caching, browser update compat. etc.)
If not, then check your MIMEs. To do this, use Firebug's Net panel to look at the headers and check they are correct.
If the MIME is wrong, then fix it using either .htaccess, or by writing a PHP file that uses file_get_contents() and header() to fix it.
I found out there was another CSS file, overwriting the one i made.
Problem solved
i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .