Posted by RobElliott on 30 Sep 2012 08:16, last edited by Helmut_pdorf on 04 Sep 2015 07:55
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) 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.
Love this article Rob! Embedding fonts is a very exciting web innovation that we should all take advantage of.
Small request: Could you please give us an example of a non-standard font working in action? That would be cool!
I have added a link to a live example at http://gtr.wikidot.com where the normal text, headings etc are imported from Google Webfonts and the top bar menu font was generated at Font Squirrel.
Shane's site at http://wdeditor.com also makes good use of the Pontano Sans font imported from Google Web Fonts.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Soooooooooo cooooooooool !!!!!!!!!!
Well thank you kind sir.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Well I got it working on my wikidot site, but I was hoping you could also print it.
Bummer for now, even your greentea site… if you print it the typeface is gone.
We have to investigate on this and extend the tutorial if it is also possible to print.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Thanks for the article.
The changes in the CSS seem specific. The font does not appear in 'Table' or 'bulleted points 'environment, for example. Is there a way to use a font everywhere on a site?
No it won't if you have just applied the font to specific elements, as I did in my example to the headers.
If you want the same font to be used everywhere on a site or category then add a html * rule at the beginning of your CSS and make sure there are no font-family properties anywhere else in your CSS.
Import the font you want to use and place the import as the first thing in your CSS. Then add the html * rule and apply the font:
You can the result of that at http://vineyard.wikidot.com/client:peter-gabriel where everything has been set to the Open Sans font.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.