On Wikidot sites the @font-face rule works well for Safari, Chrome and IE8. It does not work "out of the box" on Firefox or on IE9 beta.
However, you can get it to work on Firefox (but not IE9 beta) using the following method.
Base64 Encode
At Font Squirrel, select Expert option and the base64 encode checkbox. Then upload the font you want to use. Once you have checked the agreement checkbox click on the Download Your Kit button at the bottom. It will download a zip file to your computer containing several font files and a CSS stylesheet. Upload the font files to the css page on your computer and copy the css from the stylesheet to a different page on your site inside [[code type="css"]] .. [[/code]] tags.
It needs to be a on a separate page because the CSS code is very long and you risk exceeding the 200,000 character limit if you put it into your main CSS page.
You will then need to import the css from that page to your main css using the @import rule. It must be the first rule in your css. For example:
[[code type="CSS"]]
/* IMPORT HEADER FONT
=============================*/
@import url(/css:architect/code/1);
etc etc.....
[[/code]]
You then need to specify in your main css which elements are using the font-family you have imported and any fallback fonts. For example:
#header h1 a, #header h1 a:hover, #header h2 a, #header h2 a:hover{
color:#000000;
font-family: "ArchitectRegular", verdana, arial;
font-size:60px;
}
- Firefox supports OTF and TTF
- Internet Explorer only supports EOT
- Safari and Opera support OTF, TTF and SVG
- Chrome supports TTF and SVG.
