Welcome

Search Center

Official Documentation

Discuss:

Support Forum (Recent)

Other Resources:

Getting Help

Community HowTo's

Code Snippets

Wikidot Applications

Glossary of Terms

Index of Sites

What is Hot

Time in Toruń, Poland

[フレーム]

Users who watch this page:

...

Posted by RobElliott on 30 Sep 2012 08:16, last edited by Helmut_pdorf on 04 Sep 2015 07:55

: css

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.

Google Web Fonts

Go to http://www.google.com/webfonts

1. Find the font you want to use and click on the Add to Collection button.

2. Click the Use button in the bottom right of the screen then scroll down.

3. If there are a number of different variations check the checkboxes next to the one(s) you want to use.

3. Where you see the "Add this code to your website" click the @import button and copy the code,
for example @import url(http://fonts.googleapis.com/css?family=Architects+Daughter); to your main CSS.

Note:

• in your main CSS the @import rules must before all other CSS rules.
• if you are not sure how to create a page on your site to hold your main CSS there is a how-to at http://community.wikidot.com/howto:flexible-css-putting-css-on-its-own-page

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::

[[module css]]
@import url(http://fonts.googleapis.com/css?family=Architects+Daughter);
#page-title {
 font-family: 'Architects Daughter', cursive;
}
[[/module]]

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.

1. Go to http://www.fontsquirrel.com/fontface/generator

2. select the Expert option radio button.

3. Select the base64 encode checkbox.

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:

[[code type="CSS"]]
/* IMPORT HEADER FONT
=============================*/
@import url(/css:architect/code/1);
.....the rest of your css goes here....
[[/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;
}

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.

Another example is http://www.wdeditor.com where Shane (leiger leiger ) has used the Pontano Sans font from Google Web Fonts to good effect.

Note on font support by browsers:

• Firefox supports OTF and TTF
• Internet Explorer only supports EOT
• Safari and Opera support OTF, TTF and SVG
• Chrome supports TTF and SVG.

Related articles

Comments

[[code type="css"]]
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html * {
 font-family: "Open Sans";
}
...any other css goes here...
[[/code]]