I have have "Gulim", a custom font, embedded into my website at mangodownload.com (you can see it on the homepage, if you see Arial, it does not work on your browser.)
Unfortunately, this font does NOT work on many browsers.
Here is my CSS for the font:
#font-face {
font-family: "Gulim";
src: url("/style/fonts/Gulim.ttf");
src: local("Gulim"), url("/style/fonts/Gulim.ttf") format("truetype");
}
Any ideas on achieving cross-browser support for ALL browsers?
PLEASE NOTE: I have tried converting the font, and tried FontSquirrel. I keep receiving the same message; 'font size too large'. My gulim.ttf file is 10mb.
#font-face {
font-family: 'yourfunkyfont';
src: url('fonts/yourfunkyfont.eot');
src: url('fonts/yourfunkyfont.svg') format('truetype'),
url('fonts/yourfunkyfont.eot?#iefix') format('embedded-opentype'),
url('fonts/yourfunkyfont.woff') format('woff'),
url('fonts/yourfunkyfont.ttf') format('truetype'),
url('fonts/yourfunkyfont.svg#yourfunkyfont') format('svg');
}
this will work only if you add the following MIME-types in your IIS (other webserver):
.woff - application/x-font-woff
.svg - application/x-font-woff
There is no way to do this cross-browser unless you can get your font in the various formats required by various browsers. The CSS to use is as follows:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
As you can see, you need the font in eot, woff, ttf and svg formats.
Related
I use Brackets code editor and in the live preview it works perfectly but once I upload it onto the actual site it defaults to Arial. I've put the font in the css folder but I just don't understand why it doesn't work on the live site.
Here is my code.
#font-face {
font-family: BMgermar;
src: url('http://example.com/css/BMgermar.TTF') format('truetype');
}
Thanks in advance.
You Most Upload The Font In five Formats To Work Perfectly like This Code
#font-face {
font-family: 'droidkufi';
src: url('../fonts/droidkufi/droidkufi-webfont.eot');
src: url('../fonts/droidkufi/droidkufi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/droidkufi/droidkufi-webfont.woff') format('woff'),
url('../fonts/droidkufi/droidkufi-webfont.ttf') format('truetype'),
url('../fonts/droidkufi/droidkufi-webfont.svg#droid_arabic_kufiregular') format('svg');
font-weight: normal;
font-style: normal;
}
And The Font Formats is:
eot
woff
ttf
svg
OR You Can Simply Import The fonts form https://www.google.com/fonts
I can't seem to find the answer I'm looking for. I have an entirely static page, mostly made up of images. The font used to create the images is 'Handwriting-Dakota.ttf' found on any Mac OS X install. I have one dynamic element containing text which i want to give this font to.
I have the ttf font in the same directory as my css file.
#font-face{
font-family: dakota;
src: url('dakota.ttf') format('truetype');
}
In an html file with the css file included. <p style="font-family: dakota;">sometext</p>
I can see the rule applied in chrome's inspector but it does not change the appearance. Is what I'm trying to do impossible or am I doing it wrong?
Use this format
#font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot');
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype'),
url('fonts/myfont.svg#rsuregular') format('svg');
}
To further gain more knowledge about font-face syntax, read Bulletproof #font-face Syntax.
To get all versions of the font. google the "font converter", there will be plenty of font converter services in first page.
Make sure the url is relative to the css file and not to the webroot.
#font-face{
font-family: 'dakota';
src: url('../fonts/dakota.ttf') format('truetype');
}
And you probably should add other types to make sure other browsers can use the font without problems.
#font-face {
font-family: 'dakota';
src: url('../fonts/dakota.eot');
src: url('../fonts/dakota.eot?#iefix') format('embedded-opentype'),
url('../fonts/dakota.woff') format('woff'),
url('../fonts/dakota.ttf') format('truetype'),
url('../fonts/dakota.svg#rsuregular') format('svg');
}
#Cobolt, you can try FontSquirrel. http://www.fontsquirrel.com/fontface/generator.
All you need is .otf or .ttf file. Then, FontSquirrel will make the .svg, .eot, .woff for you and create a css file.
I used font-squirrel to generate web fonts and specify CSS declarations for the font, but it still uses the fallback fonts when I view the page in IE9 using IE7 or IE8 browser and document mode. Any idea what's going on? Here's my code (and a screenshot):
#font-face {
font-family: 'cubanoregular';
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cubano { font-family: 'cubanoregular' }
If the code you put above is accurate, then the only problem is that your path to the eot file is incorrect:
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');...
Fix that, and it should work fine. IE has supported #font-face since version 5 I believe, but in versions prior to 9 only eot is supported.
Nothing wrong with your code, the problem seems to be the font. But it's on Typekit if you want.
check your src path is correct
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
probably needs to be
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
I rely heavily on Google Webfonts for my site and (unfortunatly) google chrome presents them badly, i have set font-smooth to always, but it dosen't seem to help.
EXAMPLES:
Is there any way i could smooth them / make them look better??
Thanks,
Font rendering problems are common in GChrome, try changing the order of your #font-face sources... Chrome utilises the .svg file in the #font-face sources, in some reason it doesn´t tolerate .svg being called last in the list
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
url('../fonts/my-dirty-font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If the order #font-face order looks similar then try changing to
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.svg') format('svg');
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Personally I would use
http://www.fontsquirrel.com/
It's all hosted on your server and it's compatible with nearly every browser! Since using Font Squirrel I haven't looked elsewhere.
I have tried reading multiple articles on how to deal with custom fonts in IE, but they never seemed to work for me. I tried converting the fonts to EOT, but that didn't seem to work either. I am not sure what I am doing wrong, so I will post my code
#font-face {
font-family: "Klavika Regular";
src: url('../fonts/klavika.eot');
src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
font-weight: normal;
font-style: normal;
}
this works in ie8/9
http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html
#font-face {
font-family: 'AftaserifRegular';
src: url('AftaSerifThin-Regular-webfont.eot');
src: url('AftaSerifThin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('AftaSerifThin-Regular-webfont.woff') format('woff'),
url('AftaSerifThin-Regular-webfont.ttf') format('truetype'),
url('AftaSerifThin-Regular-webfont.svg#AftaserifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
if IE8 thinks it supports any other format other than eot of the ones listed below, then it will probably try to use that one. Maybe you could use a IE8 hack, like
src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
src /*\**/: url('../fonts/klavika.eot')\9
so only IE8 will read the last src line and thus load the .eot.
Try three kinds of CSS Formats for #font-face on FontSquirrel Generator (in "EXPERT..." mode > in section "CSS Formats:" > "more information")
It's worth checking to see if your .htaccess file allows the file type.