Most websites use "web safe" fonts which are fonts installed on all computers. However there are hundred or thousands of more interesting typefaces which you can now use with your Wikidot site. There are two ways to use other fonts, either from Google WebFonts which has over 500 available or a slightly more complex method from Font Squirrel if the font you want is not on Google Web Fonts.

4. Scroll further down the google webfonts page you then need to integrate the font-family into your CSS. So copy the code there, for example font-family: 'Architects Daughter', cursive; to the relevant rule in your main CSS. For example

#page-title {
font-family: 'Architects Daughter', cursive;
}

What this means is that for the page title the Architects Daughter font will be used, but if for some reason the google webfonts api is not working then the web safe font of cursive will be used instead, so there is a falback.

Using your own font with a css module

If you only want to use the font on one page or in a category you can use a css module on your page or in your live template page, for example::

Font Squirrel

If the font you want to use is not available at Google webfonts you can use fonts from Font Squirrel or upload your own fonts there and generate the code to you in your own site. It works well but is more complex than Google webfonts.

4. 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. I have done this in the example below where the code was put on the css:architect page. When using the @import rule you don't need the full http://… address, you can use a relative url as I have done below:

Using your own font with a css module

You can put the CSS code downloaded from Font Squirrel into a css module on your page. This is not ideal as the code is very long and you will risk exceeding the 200,000 character limit on the page.

Live Examples

A live site where both methods has been used is at http://gtr.wikidot.com and an image from that site is shown on the left

* the font for the normal text, headings etc is "Open Sans" and was imported from Google Webfonts
* the font for the top bar menu is "FGJayne" and was generated at Font Squirrel.

The CSS for that site where you can see how the fonts have been used in the CSS is at http://gtr.wikidot.com/css:theme. You will see that the FGJayne font generated at Font Squirrel is imported into the main css from its own page on the site which holds the font files and the font code.