Changing Fonts In A Joomla Template

Something I’m asked quite often is how to change the font on a Joomla site. I thought I’d write a quick post about it because it’s an easy thing to do, but there are also some limitations. There’s also one other option for using cool typefaces on your Joomla site which I’ll touch on at the end – It’s called sIFR and uses flash and JavaScript to display a custom typeface. sIFR is really just good for headings as large blocks of type should not be rendered with flash.

Before we delve into how to make the changes it’s important to understand how fonts are displayed. Fonts in web pages are not embedded into the web page itself as many people think. The font must be on the end users computer to be displayed. The way it works is the template designer (or web site designer) will enter the font(s) they want to be displayed but it must be on the visitors computer to work.

This is why pretty much all web sites use one of the 10 or so standard fonts that are available on pretty much all computers – they include Ariel, Verdana, Times, Courier, Tahoma, Georgia, and a few others.

Quite simply all you need to do to change the font in your Joomla Template is edit the font list in your template css file. The css file is in your template folder on your live site – It is usually in a directory called “css” inside the template directory:

yoursite.com/templates/your_template_name/css/template.css

But, this depends on the designer who built your template as it’s not mandatory to structure files like this. It is good practice however and if you got your template from JoomlaBear then this is where you’ll find it.

  • If you are using Joomla 1.0+ then your main template css file should be called template_css.css.
  • If you are using Joomla 1.5+ your template css file should be named template.css

The simplest way to edit this css file is to do it through the Joomla admin. Joomla provides a nice method to access both your template index.php and template css file from the template manager.

  • In Joomla 1.0 go to Site > Template Manager > Site Templates -Then select the template you are using from the list by clicking the radio button and hit Edit CSS.
  • In Joomla 1.5 go to Extensions > Template Manager -Then select the template you are using from the list by clicking the radio button and hit Edit from the top menu. On the next screen hit the Edit CSS button at the top right of screen.

Depending on how the designer structured the CSS file you may need to change font specifications in a number of places inside the template css – especially if you want to change heading styles. Typically the base font will be declared in the body tag like this:

body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	line-height:20px;
	background-color: #222222;
}

You can see in the example above that we have two fonts declared – Verdana and Arial – in this example the viewer of your site will see Verdana if they have it installed, and if not the viewers computer will try to use Arial – remember these fonts must be installed on the users computer to be seen on the web page. If Verdana and Arial were not available then the viewers computer would try to use any available sans-serif font installed. Neat eh!

Other common font-family combinations include:

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: Geneva, Arial, Helvetica, sans-serif;

And you can mix and match these as much as you like!

Sans-serif fonts are the straight and simple ones like Verdana and Arial – Serif fonts, like Times and Times New Roman. are the ones with little curly or pointy bits. An interesting fact is that sans-serif fonts are typically much easier to read on screen while serif fonts are easier to read in print! Have a look at any novel and you’ll see what I mean. However this is not true when the fonts are displayed at larger sizes so my recommendation is to go with a simple sans-serif font like verdana or arial for the body text and have fun with type faces like Trebuchet MS, Times, Tahoma, etc for your headings.

If you want to edit the heading font in your template css it will be exactly the same as above except you will need to locate the style in the css – you can do a quick “find” and search for “font-family” – if you whip through all instances of this you will find the heading styles pretty quickly. Or with Joomla you can be quite confident that your heading styles will be contained in one of the following styles:

h1
h2
h3
.componentheading
.contentheading

These are the default classes used for headings.

Hopefully this has been helpful – If you really, really want other typefaces in your template you can look at sIFR, which stands for Scalable Inman Flash Replacement. sIFR uses flash, css and javascript to replace blocks of text on your site. Its a cunning technique that I’ll be delving into further on this blog and using in some our fine Joomla Templates. Stay tuned.

24 Comments

 Add your comment
  1. I’d like to add that you could also use courier new font (it’s included in every microsoft word copy). It’s a large type of font that is not only easy to read but is designed to be read on a computer screen.

    It’s easy on the eyes and it looks similiar to newspaper or legal print. Most people have difficulty or lack a desire to read print or text if it isn’t large and spacious (but obviously nothing ridiculous like 20 point font for example). Georgia also works too.

    If you own a website or blog (which most people probably do if they are reading this) consider setting the default font first to courier new or georgia (every computer *should* have courier new and georgia) so you can encourage more people to read what you are writing.

    • Nice typography tips! I’ll definitely look at Courier – I saw it in use somewhere recently and thought it looked good!
      I’m drinking a glass of Australian Shiraz right now and thought I’d take a quick peak at Interactive Wine. Couldn’t see any tasting tips though!

  2. thanks for the details on where to find the font information in the joomla css files (and for the reminder on how the font families work). need to test this on some of our sites… very helpful

  3. Your article was (is) very helpful. But there are so many items in the css-ses that I have to try things bit for bit to see what I had changed.
    Thank you very much

    Gies Pluim
    Avery old Dutchman (81)

  4. This seems to work for most of the site, except in specific components eg, VirtueMart, Contacts and JEvents (these are the ones giving me problems). Would anyone have an idea where, if it’s possible, I would go to change these fonts so that they match the rest of my site?

  5. Thank you sooo much.

  6. Thank you so much for the tip.. God bless

  7. I think not embedding the font information in the website and requiring it to be installed on the users computer is lame. There are so many beautiful fonts out there and to be restricted to the 10 major fonts dooms all the joomla websites to having a very similar look. Now who in marketing wants that?

    • That’s a good point Joe, and you’ve reminded me I need to update this article – however the embedded font trick doesn’t work for all browsers and this has nothing to do with Joomla. A snippet I found somewhere:

      CSS3 (and even drafts of CSS2 in 1997 and 1998) have long promised a standardized way of font embedding, using the @font-face rule. What many folks probably don’t know is that this rule is already supported in Opera 9.5, shipping versions of Safari for the Mac, Windows and iPhone OS, and is promised for Firefox 3.1., and well as IE6 and later.

      Sadly, while support for @font-face was hinted at for Opera 9.5 and Firefox 3.1 (see my comments at #4 below) this is in fact not the case sadly.

      There is a catch though. All the browsers other than IE support linking to TrueType font files. Microsoft supports only the proprietary EOT file format.

  8. On another matter. Oh My God! This is scary! Courier was the typeface that was used on typewriters. Oh My God, how old am I. These people expounding courier probably don’t even know what a typewriter is. It was probably 30 years ago when Apple came out with postcript typefaces. Holy shit, freedom from a typeface where every character took up the same amount of space. Oh My God, now people are returning to Courier thinking how great it is just because they have never seen it before. There is a reason for that…it is about the ugliest typeface ever made.

  9. Joe,
    You made me chuckle, thanks for that ;-)

  10. I am building a site with JA_Purity customised. I want to change the title font to serif (it is Arial and so on in the original template). However, I hesitate because the title fonts listed include “Segoe UI”, Arial, Helvetica, sans-serif;
    Is it safe to change this to serif? Also, I only want to change to serif for the bigger headlines but the template lists h1, h2, h3, h4. What will happen if I removed h3 and h4 from the sizes I want to change to serif? How do I switch to serif just for h1 and h2? Many thanks in advance!

  11. BigBear ,many thanks for your super informative article.before i found your article i used a tremendous amount of time, just to find this piece of information you revealed on this page,, thanks a lot.

  12. ohhh man it took me more than 1 hour to figure that out! I wish I came across this article long time ago :( , why is it so hard to change things in Joomla! maybe because I am a beginner lol

    I changed the font and it did work out well for me! but I had one problem with changing the color font..can anybody help me with that? I hope they include all the tools in the 1.6 Joomla CMS.

    Thanks again!

  13. Short and neat, great typography help
    Thanks alot

  14. google @fontface. lets you use custom fonts.

  15. Dear Joomla Bear,
    I went to extensions – template manager and then edit and i get a long list of choices. Everyone seems to know what to do with these choices but I am afraid I do not. The font on my site is so insanely small and when i try to make it bigger using teh headers options its just gets crammed, bigger, bolder and crammed making it just as illegible. Can you go a few steps further with your instructions please?
    Please!
    Inka

  16. how to add a new font in joomla

  17. I’ve read you’re article and tried for hours to change all fonts into: “Comic Sans MS” without result. Would be amazing if you could help me a hand. This is how my template.css looks like:

    /* begin Page */

    /* Generated with Artisteer version 2.2.0.17981, file checksum is C1E6A7BD. */

    body
    {
    margin: 0 auto;
    padding: 0;
    background-color: #3C90B9;
    background-image: url(‘../images/Page-BgTexture.jpg’);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top center;
    }

    #art-main
    {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    }

    #art-page-background-gradient
    {
    background-position: top center;
    }

    .cleared
    {
    float: none;
    clear: both;
    margin: 0;
    padding: 0;
    border: none;
    font-size:1px;
    }

    form
    {
    padding:0 !important;
    margin:0 !important;
    }

    table.position
    {
    position: relative;
    width: 100%;
    table-layout: fixed;
    }
    /* end Page */

    /* begin Box, Sheet */
    .art-Sheet
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    width: 950px;
    min-width:1px;
    min-height:1px;
    }

    .art-Sheet-body
    {
    position: relative;
    z-index:1;
    padding: 0px;
    }

    .art-Sheet
    {
    margin-top: 0px !important;
    }

    #art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
    {
    min-width:950px;
    }

    /* end Box, Sheet */

    /* begin Menu */
    /* menu structure */

    .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
    {
    text-align:left;
    text-decoration:none;
    outline:none;
    letter-spacing:normal;
    word-spacing:normal;
    }

    .art-menu, .art-menu ul
    {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
    }

    .art-menu li
    {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    position: relative;
    z-index: 5;
    background:none;
    }

    .art-menu li:hover
    {
    z-index: 10000;
    white-space: normal;
    }

    .art-menu li li
    {
    float: none;
    }

    .art-menu ul
    {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    background:none;
    }

    .art-menu li:hover>ul
    {
    visibility: visible;
    top: 100%;
    }

    .art-menu li li:hover>ul
    {
    top: 0;
    left: 100%;
    }

    .art-menu:after, .art-menu ul:after
    {
    content: “.”;
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
    }
    .art-menu, .art-menu ul
    {
    min-height: 0;
    }

    .art-menu ul
    {
    background-image: url(../images/spacer.gif);
    padding: 10px 30px 30px 30px;
    margin: -10px 0 0 -30px;
    }

    .art-menu ul ul
    {
    padding: 30px 30px 30px 10px;
    margin: -30px 0 0 -10px;
    }

    ul.art-menu
    {
    float:right;
    }

    /* menu structure */

    .art-menu
    {
    padding: 0px 0px 0px 0px;
    }

    .art-nav
    {
    position: relative;
    height: 52px;
    z-index: 100;
    }

    .art-nav .l, .art-nav .r
    {
    position: absolute;
    z-index: -1;
    top: 0;
    height: 552px;
    background-image: url(‘../images/nav.png’);
    }

    .art-nav .l
    {
    left: 0;
    right:0px;
    }

    .art-nav .r
    {
    right: 0;
    width: 950px;
    clip: rect(auto, auto, auto, 950px);
    }

    /* end Menu */

    /* begin MenuItem */
    .art-menu ul li
    {
    clear: both;
    }

    .art-menu a
    {
    position:relative;
    display: block;
    overflow:hidden;
    height: 52px;
    cursor: pointer;
    text-decoration: none;
    margin-right: 0px;
    margin-left: 0px;
    }

    .art-menu a .r, .art-menu a .l
    {
    position:absolute;
    display: block;
    top:0;
    z-index:-1;
    height: 156px;
    background-image: url(‘../images/MenuItem.png’);
    }

    .art-menu a .l
    {
    left:0;
    right:1px;
    }

    .art-menu a .r
    {
    width:402px;
    right:0;
    clip: rect(auto, auto, auto, 401px);
    }

    .art-menu a .t
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    color: #F5F5DB;
    padding: 0 10px;
    margin: 0 1px;
    line-height: 52px;
    text-align: center;
    }

    .art-menu a:hover .l, .art-menu a:hover .r
    {
    top:-52px;
    }

    .art-menu li:hover>a .l, .art-menu li:hover>a .r
    {
    top:-52px;
    }

    .art-menu li:hover a .l, .art-menu li:hover a .r
    {
    top:-52px;
    }
    .art-menu a:hover .t
    {
    color: #F5F5DC;
    }

    .art-menu li:hover a .t
    {
    color: #F5F5DC;
    }

    .art-menu li:hover>a .t
    {
    color: #F5F5DC;
    }

    .art-menu a.active .l, .art-menu a.active .r
    {
    top: -104px;
    }

    .art-menu a.active .t
    {
    color: #FFFFFF;
    }

    /* end MenuItem */

    /* begin MenuSubItem */
    .art-menu ul a
    {
    display:block;
    text-align: center;
    white-space: nowrap;
    height: 32px;
    width: 180px;
    overflow:hidden;
    line-height: 32px;
    margin-right: auto;

    background-image: url(‘../images/subitem-bg.png’);
    background-position: left top;
    background-repeat: repeat-x;
    border-width: 0px;
    border-style: solid;
    }

    .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
    {
    display: inline;
    float: none;
    margin: inherit;
    padding: inherit;
    background-image: none;
    text-align: inherit;
    text-decoration: inherit;
    }

    .art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
    {
    text-align: left;
    text-indent: 14px;
    text-decoration: none;
    line-height: 32px;
    color: #FFFFFF;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    }

    .art-menu ul ul a
    {
    margin-left: auto;
    }

    .art-menu ul li a:hover
    {
    color: #660000;
    background-position: 0 -32px;
    }

    .art-menu ul li:hover>a
    {
    color: #660000;
    background-position: 0 -32px;
    }

    .art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
    {
    color: #660000;
    }

    .art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
    {
    color: #660000;
    }

    /* end MenuSubItem */

    /* begin Header */
    div.art-Header
    {
    margin: 0 auto;
    position: relative;
    z-index:0;
    width: 950px;
    height: 150px;
    }

    div.art-Header-jpeg
    {
    position: absolute;
    z-index:-1;
    top: 0;
    left: 0;
    width: 1300px;
    height: 15px;
    background-image: url(‘../images/Header1.jpg’);
    background-repeat: no-repeat;
    background-position: center center;
    }
    /* end Header */

    /* begin ContentLayout */
    .art-contentLayout
    {
    position: relative;
    margin-bottom: 0px;
    width: 950px;
    }
    /* end ContentLayout */

    /* begin Box, Block */
    .art-Block
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
    }

    .art-Block-body
    {
    position: relative;
    z-index:1;
    padding: 0px;
    }

    .art-Block
    {
    margin: 7px;
    }

    /* end Box, Block */

    /* begin BlockHeader */
    .art-BlockHeader
    {
    position:relative;
    z-index:0;
    height: 30px;
    padding: 0 7px;
    margin-bottom: 0px;
    }

    .art-BlockHeader .t
    {
    height: 30px;
    color: #FFFFFF;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    white-space : nowrap;
    padding: 0 6px;
    line-height: 30px;
    }

    /* end BlockHeader */

    /* begin Box, BlockContent */
    .art-BlockContent
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:3px;
    min-height:3px;
    }

    .art-BlockContent-body
    {
    position: relative;
    z-index:1;
    padding: 8px;
    }

    .art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl, .art-BlockContent-tc, .art-BlockContent-bc,.art-BlockContent-cr, .art-BlockContent-cl
    {
    position:absolute;
    z-index:-1;
    }

    .art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl
    {
    width: 2px;
    height: 2px;
    background-image: url(‘../images/BlockContent-s.png’);
    }

    .art-BlockContent-tl
    {
    top:0;
    left:0;
    clip: rect(auto, 1px, 1px, auto);
    }

    .art-BlockContent-tr
    {
    top: 0;
    right: 0;
    clip: rect(auto, auto, 1px, 1px);
    }

    .art-BlockContent-bl
    {
    bottom: 0;
    left: 0;
    clip: rect(1px, 1px, auto, auto);
    }

    .art-BlockContent-br
    {
    bottom: 0;
    right: 0;
    clip: rect(1px, auto, auto, 1px);
    }

    .art-BlockContent-tc, .art-BlockContent-bc
    {
    left: 1px;
    right: 1px;
    height: 2px;
    background-image: url(‘../images/BlockContent-h.png’);
    }

    .art-BlockContent-tc
    {
    top: 0;
    clip: rect(auto, auto, 1px, auto);
    }

    .art-BlockContent-bc
    {
    bottom: 0;
    clip: rect(1px, auto, auto, auto);
    }

    .art-BlockContent-cr, .art-BlockContent-cl
    {
    top: 1px;
    bottom: 1px;
    width: 2px;
    background-image: url(‘../images/BlockContent-v.png’);
    }

    .art-BlockContent-cr
    {
    right:0;
    clip: rect(auto, auto, auto, 1px);
    }

    .art-BlockContent-cl
    {
    left:0;
    clip: rect(auto, 1px, auto, auto);
    }

    .art-BlockContent-cc
    {
    position:absolute;
    z-index:-1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-color: #32779A;
    }

    .art-BlockContent-body
    {
    color:#FFFFFF;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    }

    .art-BlockContent-body a:link
    {
    color: #F2F2F2;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    text-decoration: underline;
    }

    .art-BlockContent-body a:visited, .art-BlockContent-body a.visited
    {
    color: #CCE7BB;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    text-decoration: underline;
    }

    .art-BlockContent-body a:hover, .art-BlockContent-body a.hover
    {
    color: #212121;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    text-decoration: none;
    }

    .art-BlockContent-body ul
    {
    list-style-type: none;
    color: #D5D9D4;
    margin:0;
    padding:0;
    }

    .art-BlockContent-body li
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    text-decoration: none;
    }

    .art-BlockContent-body ul li
    {
    padding:0px 0 0px 10px;
    background-image: url(‘../images/BlockContentBullets.png’);
    background-repeat:no-repeat;
    margin:0.5em 0 0.5em 0;
    line-height:1.2em;
    }

    /* end Box, BlockContent */

    /* begin Box, Post */
    .art-Post
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
    }

    .art-Post-body
    {
    position: relative;
    z-index:1;
    padding: 0px;
    }

    .art-Post
    {
    margin: 50px;
    }

    /* Start images */
    a img
    {
    border: 0;
    }

    .art-article img, img.art-article
    {
    margin: 1em;
    }

    .art-metadata-icons img
    {
    border: none;
    vertical-align: middle;
    margin:2px;
    }
    /* Finish images */

    /* Start tables */

    .art-article table, table.art-article
    {
    border-collapse: collapse;
    margin: 1px;
    width:auto;
    }

    .art-article table, table.art-article .art-article tr, .art-article th, .art-article td
    {
    background-color:Transparent;
    }

    .art-article th
    {
    text-align:center;
    vertical-align:middle;
    padding: 7px;
    }

    /* Finish tables */
    /* end Box, Post */

    /* begin PostHeaderIcon */
    .art-PostHeaderIcon-wrapper
    {
    text-decoration:none;
    margin: 0.2em 0;
    padding: 0;
    font-weight:normal;
    font-style:normal;
    letter-spacing:normal;
    word-spacing:normal;
    font-variant:normal;
    text-decoration:none;
    font-variant:normal;
    text-transform:none;
    text-align:left;
    text-indent:0;
    line-height:inherit;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #FFFDF0;
    }

    .art-PostHeaderIcon-wrapper, .art-PostHeaderIcon-wrapper a, .art-PostHeaderIcon-wrapper a:link, .art-PostHeaderIcon-wrapper a:visited, .art-PostHeaderIcon-wrapper a:hover
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #FFFDF0;
    }

    /* end PostHeaderIcon */

    /* begin PostHeader */
    .art-PostHeader a:link
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #C7C7C7;
    }

    .art-PostHeader a:visited, .art-PostHeader a.visited
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #D8DBD6;
    }

    .art-PostHeader a:hover, .art-PostHeader a.hovered
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #C7C7C7;
    }
    /* end PostHeader */

    /* begin PostContent */
    /* Content Text Font & Color (Default) */
    body
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #FFFDF0;
    }

    .art-PostContent
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-style: normal;
    font-weight: normal;
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 150%;
    color: #FFFDF0;
    }

    /* Start Content link style */
    /*
    The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
    http://www.w3schools.com/CSS/css_pseudo_classes.asp
    http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
    */
    a
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: underline;
    color: #F5F5DB;
    }

    /* Adds special style to an unvisited link. */
    a:link
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: underline;
    color: #F5F5DB;
    }

    /* Adds special style to a visited link. */
    a:visited, a.visited
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: underline;
    color: #CCE7BB;
    }

    /* :hover – adds special style to an element when you mouse over it. */
    a:hover, a.hover
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: none;
    color: #660000;
    }

    /* Finish Content link style */

    /* Resert some headings default style & links default style for links in headings*/
    h1, h2, h3, h4, h5, h6,
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
    h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
    h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
    {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    }

    /* Start Content headings Fonts & Colors */
    h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    color: #FFFFFF;
    }

    h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #FFFFFF;
    }

    h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #FFFFFF;
    }

    h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #FFFFFF;
    }

    h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #FFFFFF;
    }

    h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #FFFFFF;
    }
    /* Finish Content headings Fonts & Colors */

    /* end PostContent */

    /* begin PostBullets */
    /* Start Content list */
    ol, ul
    {
    color: #FFFFFF;
    margin:1em 0 1em 2em;
    padding:0;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    }

    li ol, li ul
    {
    margin:0.5em 0 0.5em 2em;
    padding:0;
    }

    li
    {
    margin:0.2em 0;
    padding:0;
    }

    ul
    {
    list-style-type: none;
    }

    ol
    {
    list-style-position:inside;

    }

    .art-Post li
    {
    padding:0px 0 0px 9px;
    line-height:1.2em;
    }

    .art-Post ol li, .art-Post ul ol li
    {
    background: none;
    padding-left:0;
    }

    .art-Post ul li, .art-Post ol ul li
    {
    background-image: url(‘../images/PostBullets.png’);
    background-repeat:no-repeat;
    padding-left:9px;
    }

    /* Finish Content list */
    /* end PostBullets */

    /* begin PostQuote */
    /* Start blockquote */
    blockquote p
    {
    color:#111311;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-style: italic;
    font-weight: normal;
    text-align: left;
    }

    blockquote
    {
    margin:10px 10px 10px 50px;
    padding:5px 5px 5px 41px;
    background-color:#F5F5DC;
    background-image:url(‘../images/PostQuote.png’);
    background-position:left top;
    background-repeat:no-repeat;
    }

    /* Finish blockuote */
    /* end PostQuote */

    /* begin Button */
    .art-button-wrapper .art-button
    {
    display:inline-block;
    width: auto;
    outline:none;
    border:none;
    background:none;
    line-height:24px;
    margin:0 !important;
    padding:0 !important;
    overflow: visible;
    cursor: default;
    text-decoration: none !important;
    z-index:0;
    }

    .art-button-wrapper
    {
    display:inline-block;
    position:relative;
    height: 24px;
    overflow:hidden;
    white-space: nowrap;
    width: auto;
    z-index:0;
    }

    .art-button-wrapper .art-button
    {
    display:block;
    height: 24px;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
    padding: 0 7px !important;
    line-height: 24px;
    text-decoration: none !important;
    color: #FFFDEE !important;
    }

    input, select
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    }

    .art-button-wrapper.hover .art-button, .art-button:hover
    {
    color: #CCE7BB !important;
    text-decoration: none !important;
    }

    .art-button-wrapper.active .art-button
    {
    color: #EBEBEB !important;
    }

    .art-button-wrapper .l, .art-button-wrapper .r
    {
    display:block;
    position:absolute;
    z-index:-1;
    height: 72px;
    background-image: url(‘../images/Button.png’);
    }

    .art-button-wrapper .l
    {
    left:0;
    right:0px;
    }

    .art-button-wrapper .r
    {
    width:401px;
    right:0;
    clip: rect(auto, auto, auto, 401px);
    }

    .art-button-wrapper.hover .l, .art-button-wrapper.hover .r
    {
    top: -24px;
    }

    .art-button-wrapper.active .l, .art-button-wrapper.active .r
    {
    top: -48px;
    }

    /* end Button */

    /* begin Footer */
    .art-Footer
    {
    position:relative;
    z-index:0;
    overflow:hidden;
    width: 950px;
    margin: 5px auto 0px auto;
    }

    .art-Footer .art-Footer-inner
    {
    height:1%;
    position: relative;
    z-index: 0;
    padding: 8px;
    text-align: center;
    }

    .art-Footer .art-Footer-background
    {
    position:absolute;
    z-index:-1;
    background-repeat:no-repeat;
    background-image: url(‘../images/Footer.png’);
    width: 950px;
    height: 150px;
    bottom:0;
    left:0;
    }

    .art-Footer .art-Footer-text p
    {
    margin: 0;
    }

    .art-Footer .art-Footer-text
    {
    display:inline-block;
    color:#D6D6D6;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 11px;
    }

    .art-Footer .art-Footer-text a:link
    {
    text-decoration: none;
    color: #3B6222;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: underline;
    }

    .art-Footer .art-Footer-text a:visited
    {
    text-decoration: none;
    color: #191B18;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: underline;
    }

    .art-Footer .art-Footer-text a:hover
    {
    text-decoration: none;
    color: #9E9E9E;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    text-decoration: none;
    }
    /* end Footer */

    /* begin PageFooter */
    .art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
    {
    font-family:”Comic Sans MS”, Arial;
    font-size:13px;
    letter-spacing:normal;
    word-spacing:normal;
    font-style:normal;
    font-weight:normal;
    text-decoration:underline;
    color:#949494;
    }

    .art-page-footer
    {
    margin:1em;
    text-align:center;
    text-decoration:none;
    color:#949494;
    }
    /* end PageFooter */

    /* begin LayoutCell */
    .art-contentLayout .art-sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 189px;
    }
    /* end LayoutCell */

    /* begin LayoutCell */
    .art-contentLayout .art-content
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 571px;
    }
    .art-contentLayout .art-content-sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 760px;
    }
    .art-contentLayout .art-content-sidebar2
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 760px;
    }
    .art-contentLayout .art-content-wide
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 949px;
    }
    /* end LayoutCell */

    /* begin LayoutCell */
    .art-contentLayout .art-sidebar2
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 189px;
    }
    /* end LayoutCell */

    .art-contentLayout li
    {
    float: none;
    }

    table.moduletable th
    {
    font-size: 140%;
    padding: .5em 0em;
    }

    #footer
    {
    text-align: center;
    }

    .breadcrumbs
    {
    display: block;
    padding: .7em 0em;
    }

    .contentpaneopen span.small, .contentpaneopen td.createdate, .contentpaneopen td.modifydate
    {
    font-size: 75%;
    padding-bottom: 1em;
    }

    .column_separator
    {
    padding-left: .4em;
    }

    .pagination span
    {
    padding: 2px;
    }

    .pagination a
    {
    padding: 2px;
    }

    div.offline
    {
    background: #fffebb;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.2em;
    padding: 5px;
    }

    span.pathway
    {
    display: block;
    margin: 0 20px;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    }

    /* headers */
    table.moduletable th, legend
    {
    margin: 0;
    font-weight: bold;
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 1.5em;
    padding-left: 0px;
    margin-bottom: 10px;
    text-align: left;
    }

    /* form validation */
    .invalid
    {
    border-color: #ff0000;
    }

    label.invalid
    {
    color: #ff0000;
    }

    /** overlib **/

    .ol-foreground
    {
    background-color: #f6f6f6;
    }

    .ol-background
    {
    background-color: #666;
    }

    .ol-textfont
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    }

    .ol-captionfont
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    color: #f6f6f6;
    font-weight: bold;
    }

    .ol-captionfont a
    {
    color: #0B55C4;
    text-decoration: none;
    font-size: 12px;
    }

    /* spacers */
    span.article_separator
    {
    display: none;
    }

    .column_separator
    {
    padding-left: 10px;
    }

    td.buttonheading img
    {
    border: none;
    }

    .clr
    {
    clear: both;
    }

    div#maindivider
    {
    border-top: 1px solid #ddd;
    margin-bottom: 10px;
    overflow: hidden;
    height: 1px;
    }

    table.blog span.article_separator
    {
    display: none;
    }

    /* edit button */
    .contentpaneopen_edit
    {
    float: left;
    }

    /* table of contents */
    table.contenttoc
    {
    margin: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    float: right;
    }

    table.contenttoc td
    {
    padding: 0 5px;
    }

    /* content tables */
    td.sectiontableheader
    {
    background: #efefef;
    color: #333;
    font-weight: bold;
    padding: 4px;
    border-right: 1px solid #fff;
    }

    tr.sectiontableentry0 td,
    tr.sectiontableentry1 td,
    tr.sectiontableentry2 td
    {
    padding: 4px;
    }

    td.sectiontableentry0,
    td.sectiontableentry1,
    td.sectiontableentry2
    {
    padding: 3px;
    }

    /* content styles */
    table.contentpaneopen, table.contentpane
    {
    margin: 0;
    padding: 0;
    width: auto;
    }

    table.contentpaneopen li
    {
    margin-bottom: 5px;
    }

    table.contentpaneopen fieldset
    {
    border: 0;
    border-top: 1px solid #ddd;
    }

    table.contentpaneopen h3
    {
    margin-top: 25px;
    }

    table.contentpaneopen h4
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    color: #333;
    }

    .highlight
    {
    background-color: #fffebb;
    }

    /* module control elements */
    table.user1user2 div.moduletable
    {
    margin-bottom: 0px;
    }

    div.moduletable, div.module
    {
    margin-bottom: 25px;
    }

    div.module_menu h3
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    color: #eee;
    margin: -23px -4px 5px -5px;
    padding-left: 10px;
    padding-bottom: 2px;
    }

    div.module_menu
    {
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
    }

    div.module_menu div div div
    {
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 15px;
    width: auto;
    }

    div.module_menu div div div div
    {
    background: none;
    padding: 0;
    }

    div.module_menu ul
    {
    margin: 10px 0;
    padding-left: 20px;
    }

    div.module_menu ul li a:link, div.module_menu ul li a:visited
    {
    font-weight: bold;
    }

    #leftcolumn div.module
    {
    padding: 0 10px;
    }

    #leftcolumn div.module table
    {
    width: auto;
    }

    /* forms */
    table.adminform textarea
    {
    width: 540px;
    height: 400px;
    font-size: 1em;
    color: #000099;
    }

    div.search input
    {
    width: 145px;
    border: 1px solid #ccc;
    margin: 15px 0 10px 0;
    }

    form#form-login
    {
    text-align: left;
    }

    form#form-login fieldset
    {
    border: 0 none;
    margin: 0;
    padding: 0.2em;
    }

    form#form-login ul
    {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    form#form-login ul li
    {
    background-image: none;
    padding: 0;
    }

    #modlgn_username, #modlgn_passwd
    {
    width: 90%;
    }

    #form-login-username, #form-login-password, #form-login-remember
    {
    display: block;
    margin: 0;
    }

    form#com-form-login
    {
    text-align: left;
    }

    form#com-form-login fieldset
    {
    border: 0 none;
    margin: 0;
    padding: 0.2em;
    }

    form#com-form-login ul
    {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    form#com-form-login ul li
    {
    background-image: none;
    padding: 0;
    }

    /* thumbnails */
    div.mosimage
    {
    margin: 5px;
    }

    div.mosimage_caption {
    font-size: .90em;
    color: #666;
    }

    div.caption
    {
    padding: 0 10px 0 10px;
    }

    div.caption img
    {
    border: 1px solid #CCC;
    }

    div.caption p
    {
    font-size: .90em;
    color: #666;
    text-align: center;
    }

    /* Parameter Table */
    table.paramlist
    {
    margin-top: 5px;
    }

    table.paramlist td.paramlist_key
    {
    width: 128px;
    text-align: left;
    height: 30px;
    }

    div.message
    {
    font-weight: bold;
    font-size: 14px;
    color: #c30;
    text-align: center;
    width: auto;
    background-color: #f9f9f9;
    border: solid 1px #d5d5d5;
    margin: 3px 0px 10px;
    padding: 3px 20px;
    }

    /* Banners module */

    /* Default skyscraper style */
    .banneritem img
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    /* Text advert style */

    .banneritem_text
    {
    padding: 4px;
    font-size: 11px;
    }

    .bannerfooter_text
    {
    padding: 4px;
    font-size: 11px;
    background-color: #f7f7f7;
    text-align: right;
    }

    /* System Messages */
    /* see system general.css */

    .pagination span
    {
    padding: 2px;
    }

    .pagination a
    {
    padding: 2px;
    }

    /* Polls */
    .pollstableborder
    {
    margin-top: 8px;
    }

    .pollstableborder td
    {
    text-align: left;

    }

    /* WebLinks */
    span.description
    {
    display: block;
    padding-left: 30px;
    }

    /* Frontend Editing*/
    fieldset
    {
    border: 1px solid #ccc;
    margin-top: 15px;
    padding: 15px;
    }

    legend
    {
    margin: 0;
    padding: 0 10px;
    }

    td.key
    {
    border-bottom: 1px solid #eee;
    color: #666;
    }

    /* Tooltips */

    .tool-tip
    {
    float: left;
    background: #ffc;
    border: 1px solid #d4d5aa;
    padding: 5px;
    max-width: 200px;
    }

    .tool-title
    {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-weight: bold;
    margin-top: -15px;
    padding-top: 15px;
    padding-bottom: 5px;
    background: url(../../system/images/selector-arrow.png) no-repeat;
    }

    .tool-text
    {
    font-size: 100%;
    margin: 0;
    }

    /* System Standard Messages */
    #system-message
    {
    margin-bottom: 20px;
    }

    #system-message dd.message ul
    {
    background: #c3d2e5 url(../../system/images/notice-info.png) 4px center no-repeat;
    border-top: 3px solid #de7a7b;
    border-bottom: 3px solid #de7a7b;
    margin:0px;
    padding-left: 40px;
    text-indent:0px;
    }

    /* System Error Messages */
    #system-message dd.error ul
    {
    color: #c00;
    background: #e6c0c0 url(../../system/images/notice-alert.png) 4px center no-repeat;
    border-top: 3px solid #DE7A7B;
    border-bottom: 3px solid #DE7A7B;
    margin: 0px;
    padding-left: 40px;
    text-indent: 0px;
    }

    /* System Notice Messages */
    #system-message dd.notice ul
    {
    color: #c00;
    background: #efe7b8 url(../../system/images/notice-note.png) 4px center no-repeat;
    border-top: 3px solid #f0dc7e;
    border-bottom: 3px solid #f0dc7e;
    margin: 0px;
    padding-left: 40px;
    text-indent: 0px;
    }

    #syndicate
    {
    float: left;
    padding-left: 25px;
    }

    /* Component Specific Fixes */

    #component-contact table td
    {
    padding: 2px 0;
    }

    .breadcrumbs img
    {
    margin: 0px;
    padding: 0px;
    border: 0px;
    }

    .mceToolbarTop {
    white-space: normal;
    }

    .mceEditor
    {
    background: none;
    }

    #archive-list
    {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #archive-list li
    {
    list-style-type: none;
    background-image: none;
    margin-left: 0px;
    padding-left: 0px;
    }

    #navigation
    {
    text-align: center;
    }

    .article h3 img
    {
    border: none;
    display: inline;
    margin: 0;
    padding: 0;
    }

    .art-Footer-text .moduletable
    {
    border: none;
    margin: 0;
    padding: 0;
    }

    .pollstableborder td {
    vertical-align: middle;
    }

    .img_caption.left
    {
    float: left;
    margin-right: 1em;
    }

    .img_caption.right
    {
    float: right;
    margin-left: 1em;
    }

    .img_caption.left p
    {
    clear: left;
    text-align: center;
    }

    .img_caption.right p
    {
    clear: right;
    text-align: center;
    }

    .img_caption img
    {
    margin: 0em;
    }

    .contentheading
    {
    font-family:”Comic Sans MS”,Arial,Helvetica,Sans-Serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #FFFFFF;
    }

  18. the font doesnt have to be in the user’s system. We can store the fonts in a folder, just lyk images, n we can use them in the site.. So tht font also loads when the site loads.. @fontface

Leave a Comment

Your email address will not be published.