Wiki web fonts

Want to use some “hot” new web fonts to pimp your Confluence wiki?

It’s really straightforward. This post describes a method by which you can change all the headings to use web fonts hosted by Google.

Site-wide web fonts

Using Rokkitt font

Browse to Confluence Administration | Look and Feel | Custom HTML

In At end of the HEAD paste:

<!-- Fonts for headings -->
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' 
      rel='stylesheet' type='text/css'>
<style>
#com-atlassian-confluence h1, 
#com-atlassian-confluence h2, 
#com-atlassian-confluence h3, 
#com-atlassian-confluence h4, 
#com-atlassian-confluence h5, 
#com-atlassian-confluence h6 {
	font-family: 'Rokkitt', serif;
	font-weight : bold; 
}
</style>

Please note that adding inline styles is not big or clever, but it is quick and easy for the purpose of this blogpost.

This results in a layout similar to the screenshot below:

Using Leckerli One font

Was that too corporate? Then lets have some handwriting…

Browse to Confluence Administration | Look and Feel | Custom HTML

In At end of the HEAD paste:

<!-- Fonts for headings -->
<link href='http://fonts.googleapis.com/css?family=Leckerli+One:400' 
      rel='stylesheet' type='text/css'>
<style>
#com-atlassian-confluence h1, 
#com-atlassian-confluence h2, 
#com-atlassian-confluence h3, 
#com-atlassian-confluence h4, 
#com-atlassian-confluence h5, 
#com-atlassian-confluence h6 {
	font-family: 'Leckerli One', cursive;
}
</style>

Now, you’ll get something like this:

I’m not sure that this is a good look, but never mind.

Web fonts for a single space

Want to just mess up the fonts in a single space?

Then, duplicate the content of the Google hosted stylesheet — for example http://fonts.googleapis.com/css?family=Leckerli+One:400 and add to the space stylesheet…

Browse to Browse | Space Admin | Look and Feel | Stylesheet.

Click on Edit and paste in:

/* Duplicated from http://fonts.googleapis.com/css?family=Leckerli+One:400 */
@font-face {
  font-family: 'Leckerli One';
  font-style: normal;
  font-weight: normal;
  src: local('LeckerliOne'), url('http://themes.googleusercontent.com/static/fonts/leckerlione/v2/S2Y_iLrItTu8kIJTkS7DrKRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}

/* Targetting Confluence heading  */
#com-atlassian-confluence h1, 
#com-atlassian-confluence h2, 
#com-atlassian-confluence h3, 
#com-atlassian-confluence h4, 
#com-atlassian-confluence h5, 
#com-atlassian-confluence h6 {
	font-family: 'Leckerli One', cursive;
}

This will only affect the space in which you add the CSS and will override the global styles.

I’m not sure whether the URL for the font will remain constant in the long term though, so you may have to repeat this process.

Be careful

There are plenty of web font services and many, many fonts to choose from. With great power comes great responsibility, so be careful.

David is a senior developer and solutions architect at AppFusions based in Nottingham, England.

AppFusions
AppFusions solves mixed-technology integration problems. We bring engineering and business workflows together, you can work better, faster and smooter.

AppFusions is headquartered in San Francisco, California and works with enterprise vendors and partners such as IBM, Jive, Egnyte, DropBox, Box and Atlassian.

4 comments on “Wiki web fonts

  1. Gareth says:

    This is very cool. A few years ago we tried using web fonts on http://www.adaptavist.com and it did not end well – lots of formatting problems and hidden text. Thankfully web fonts seem to have come a long way since then and you can trust Google with the hosting, right!?

    1. David says:

      TypeKit and others have a better selection of quality typography, but Google’s hosting is “free”.

  2. Joe says:

    Thanks Dave ;)

    1. David says:

      Joe, are you going to use some spanking web fonts on yours?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP-SpamFree by Pole Position Marketing