Force Font

[oo7ml]

Hi, there is a specific font that i have used in a certain section of my website design. I know that this font will NOT be on 99.9% of my users computers... so is there a way to apply this font to certain text, without having to use images for the text...

If you can suggest away, can you confirm that it is compatible across all browsers...

[ZABI]

a good idea is to use embeded (eot) fonts, there are also some API's available for embeding fonts using css, most popular is Google Web Fonts http://www.google.com/webfonts

[oo7ml]

Hi, thanks... is this the same as @font-face or can you explain it a little better, thanks...

[cbVision]

@font-face doesn't work across all browsers. The Google Webfont API will. It uses font-face when it can, but also includes JavaScript to work with older browsers.

[aj_nsc]

@font-face doesn't work across all browsers. The Google Webfont API will. It uses font-face when it can, but also includes JavaScript to work with older browsers.

Sure it does.

All you need is all the proper files (eot, svg, ttf or otf and woff) and you've got support in everything even back to IE6.

You can easily get all the files by starting with one ttf or otf and uploading it to the converter on fontsquirrel.com and using the bulletproof font-face syntax on fontspring.com.

Also, your statement doesn't really make sense because the Google Webfont API uses @font-face.

[bungperson]

i think the solution is Google Web Fonts http://www.google.com/webfonts, yes you can use it but if the font is not available you can use @font-face, and if you want to support to any browser you must change the format to eot, svg, ttf or otf and woff, examples :

@font-face {
font-family: 'hollaregular';
src: url('includes/font/hollascript-webfont.eot');
src: url('includes/font/hollascript-webfont.eot?#iefix') format('embedded-opentype'),
url('includes/font/hollascript-webfont.woff') format('woff'),
url('includes/font/hollascript-webfont.ttf') format('truetype'),
url('includes/font/hollascript-webfont.svg#hollaregular') format('svg');
font-weight: normal;
font-style: normal;
}

you can export the font in http://www.fontsquirrel.com/fontface/generator , so you have the all format .

[ZABI]

personally i will prefer the following, as it reduces the http request to google api, thus faster loading,

@font-face {
font-family: 'hollaregular';
src: url('includes/font/hollascript-webfont.eot');
src: url('includes/font/hollascript-webfont.eot?#iefix') format('embedded-opentype'),
url('includes/font/hollascript-webfont.woff') format('woff'),
url('includes/font/hollascript-webfont.ttf') format('truetype'),
url('includes/font/hollascript-webfont.svg#hollaregular') format('svg');
font-weight: normal;
font-style: normal;
}