mojoPortal Tips: How to Use Web Fonts in mojoPortal

So – with the latest release of mojoPortal, we’ve gotten some new skins to work with – or maybe you’ve created a custom skin using Artisteer. Whether you’re going for a fully customized look, or just wanting to update an existing skin, one very easy method to give your website a bit more individuality, or conform with a corporate branding message, is to use web fonts.

What are web fonts? Here’s a very concise description from Wikipedia: “Web fonts allow Web designers to use fonts that are not installed on the viewer’s computer.” This refers to the fact that the fonts installed on your local computer won’t always be the same ones your viewers have installed on theirs. With the proliferation of devices such as iPads, iPhones, and Android devices, as well as PCs and Macs, it can be a real challenge to keep your font choices consistent across all platforms. The best solution has been the font-face format introduced in CSS2, and widely accepted in CSS3.

@Font-face allows your browser to present fonts stored on the web server, exactly as they’d appear if they were installed on your user’s device. Granted, different browsers still use slightly different formats (.svg, .eot, .ttf, .otf); thus, it’s best to use a web kit that generates your font in all the appropriate formats.

So, with all that history, here’s the step-by-step on how to use web fonts in mojoPortal.

1) Acquire a font-face kit for your font of choice; choose from the wide variety at Font Squirrel, or if you already have a preferred font (check the distribution rights), upload it and generate a font-face kit.

2) Drop the files from the font face kit into your mojoPortal skin. This will put all the associated font files into the same folder as your layout.master and .css files, for easy identification.

3) Add your @font-face CSS to the style.css of your mojoPortal skin you wish to use the font-face with. Most generated skins will have a .css file with the code pre-generated; it will look something like this:

@font-face {
    font-family: 'ParisianNormal';
    src: url('parisr-webfont.eot');
    src: url('parisr-webfont.eot?#iefix') format('embedded-opentype'),
         url('parisr-webfont.woff') format('woff'),
         url('parisr-webfont.ttf') format('truetype'),
         url('parisr-webfont.svg#ParisianNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

If you were to use the font-face for your module headers, you’d reference it like this:

h2.moduletitle
{
font-family: 'ParisianNormal', Georgia, serif;
font-weight:bold;
}

Save, clear your cache, and see the difference it makes!

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under MojoPortal | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

Leave a Reply

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


3 × = 21

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