This page explains how to use webfonts on a wiki hosted here on OborWiki.
Contents
General tips
In order for the CSS code contained in your Site.StyleSheet page to be applied to wikipages, you have to include the (:stylepage:) directive somewhere on the page. (To avoid having to do this for every page, place the (:stylepage:) directive in the GroupHeader page for each group you want the stylesheet to apply to, or in Site.AllGroupHeader to apply to all groups.)
You can mix and match the webfont sources described below, by using multiple @import statements.
NOTE: All @import statements have to come first, before anything else in the style sheet.
Using imported webfonts
To use a webfont after you've imported it, you have to specify it via a font-family property declaration. For example, you might put the following in your Site.StyleSheet page:
body { font-family: Source Sans Pro, sans-serif; }
This would make all text on your wiki display in the Source Sans Pro font (which you have, presumably, imported, in one of the ways listed below).
Or, you might want to make just one sort of element on one specific page display in some particular font:
(:css:)
code, pre { font-family: Inconsolata, monospace; }
(:cssend:)
This would make all preformatted (<pre>) and code (<code>) blocks, on that page only, display in the Inconsolata font (which, again, you have to have imported, as described below).
Importing fonts from Google Fonts
To use fonts from Google fonts on your wiki, edit your Site.StyleSheet page (creating it if it doesn't already exist), adding a line like the following:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic');
In this example, we're importing the Open Sans font, in every available weight, in roman and italic, and also requesting the Cyrillic characters in addition to the Roman ones (which come standard).
(Google generates this URL for you, via Google Fonts' font selection UI.)
Importing fonts from Obormot’s font server
To use fonts from fonts.obormot.net, edit your Site.StyleSheet page (creating it if it doesn't already exist), adding a line like the following:
@import url('//fonts.obormot.net?fonts=OpenSans,AnonymousPro&host=s3');
In this example, we're importing the Open Sans and Anonymous Pro fonts. (CSS code for all weights and styles is imported automatically, although the font files themselves are not loaded unless they're needed.)
(See fonts.obormot.net for details on what fonts are available and how to specify which fonts you want to import. See also the fonts demo page, which lets you preview most of the available fonts.)
Webfont aggregation
To aggregate all the font data into the CSS file itself, append &base64encode=1 to the URL in the @import line. (See New font server feature: webfont aggregation via base64 encoding for more info about webfont aggregation.)
Using uploaded font files
You can also use font files that you've uploaded as attachments. In this case, you have to write the @font-face rules yourself (see this page for info on how to do this). You can place the @font-face rules into Site.StyleSheet, into Site.LocalCSS, or into a (:css:) / (:cssend:) directive block.
When writing the @font-face rule, specify the URLs like so:
src: url('attach/your-font-file-name.otf') format('opentype');
(Substituting .ttf and truetype, or whatever else, as appropriate.)
Fonts from other sources
If you want to use webfonts from somewhere other than the three sources described above, you're on your own. (Commercial font services typically come with instructions on how to use them in your website.)
