You may want to use some particular font on your site that is not within the "standard" web fonts of Arial, Tahoma, Georgia, etc. In order to do this you need to take a few specific steps.

Step 1: Upload the font files to your Joomla installation.

Step 2: Establish these fonts in your custom stylesheet using @font-face.

Step 3: Use the specified font for a class designation or an id within your stylesheet.

Let's elaborate.

For Step 1 you need to aquire the files that instruct the browser how to render that font. Different browsers need different types of files. 

.ttf - works on many browsers, but not IE or iPhones.
.eot - IE only
.woff - is a compressed version of the font and is an emerging standard.
.svg - woks on iPhone and iPad.

You can aquire certain @font-face kits from sites such as fontsquirrel.com for free, or you can purchase these files from a multitude of font providers. This all depends on if you really need a specific font to match the web designers layout or if you can make do with something similar. Keep in mind that not all fonts have the same quality.

Some may not render well in large sizes, may not be suited for paragraph text or look exactly the same across different browsers or devices. Lower quality fonts may not be as crisp or their letters may not be spaced properly.

Create a  directory named fonts in your Protostar template section of your Joomla installation using ftp or your hosting file manager.

/templates/protostar/fonts

Upload the font files into that directory.


For Step 2 you need to edit your custom stylesheet and add an @font-face style. If you don't have a custom stylesheet set up, you can read how to do that in the Add a custom stylesheet to Protostar article. Here is an example for @font-face specifying a font called Eraser. Put this towards the top of the stylesheet.

@font-face {
    font-family: 'EraserRegular';
    src: url('../fonts/EraserRegular-webfont.eot');
    src: url('../fonts/EraserRegular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/EraserRegular-webfont.woff') format('woff'),
    url('../fonts/EraserRegular-webfont.ttf') format('truetype'),
    url('../fonts/EraserRegular-webfont.svg#EraserRegular') format('svg');
}

For Step 3 you need to use this font-family that was established in Step 2. Here is an example of how to associate a class="titlefont" with a particular font:

.titlefont { font-family: "EraserRegular", Impact, sans-serif}

Be sure to specify some fallback fonts for older browsers or if the browser doesn't seem to like or find your font files. The fallback fonts should be a similar style to your custom font.


That should do it. Now if you assign the class .titlefont to text using your text editor your text should appear in your specified font.

Other ways to assign custom fonts

You can take Step 1 and Step 2, but then make it so the built in Protostar styling reflects the specified font. Say you want all <h1> and <h2> tags to have your new font. Simple edit the custom stylesheet to reflect this. If you have called out your custom stylesheet properly, it should override any styles established in template.css.

h1, h2 {font-family: "EraserRegular", Impact, sans-serif;}

 

Using Google fonts

You can also use Google fonts in your Joomla website. When you use Google fonts, you don't need to upload font files to your site or have an @font-face call in your stylesheet, you just reference the Google fonts. You still need to assign the font to a specific tag, class or id in the stylesheet.

Visit http://www.google.com/fonts and find the font that you want to use. When you find the one you like, select Add to Collection. At the bottom of the screen select Use. This brings you to a new page. Within that new screen, select any font-weights that you might use and any other font character families that you might need for your languages.

Scroll down on the page and you will see code that you can copy and paste into your index.php file in your Protostar template or whatever other template you are using. Be sure to make a backup copy of your index.php before editing the file. Include the Google code in the <head> section of the index.php file. The code will look something like this:

<link href='http://fonts.googleapis.com/css?family=Cherry+Swash:400,700' rel='stylesheet' type='text/css'>

At the Google font webpage you need to scroll down a bit more to see how to specify this font-family in your stylesheet. For example:

font-family: 'Cherry Swash', cursive;


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.