Search
Sponsored Links
| | Print | |
|
How to change Fonts in a Joomla! (TM) Template Fonts are not included in a web page as many people think but are displayed from the Users Computer, so if you set a really unusual font to be displayed on your web site, chances are that many users won't see it as you have designed it. This is why pretty much all web sites use one of the 10 or so standard fonts that are available - the most common examples are:
You will need to edit your template.css file to change the font in your Joomla! (TM) Template . The css file is in your template folder on your live site - It is usually in a directory called “css” inside the template directory for example: www.mywebsite.com/templates/your_template_name/css/template.css Note: This does depend on the designer who built your template as it’s not mandatory to structure files like this but this is normally where you will find the template.css file. If you are using Joomla! (TM) 1.0+ then your main template css file will probably be called template_css.css. You can edit this css file through the Joomla admin. Joomla! (TM) provides a nice method to access both your template index.php and template css file from the template manager. Click Extensions menu option The Extensions menu will display Click 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 {
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. Other common font-family combinations include: font-family: 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! 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” - With Joomla! you can be quite confident that your heading styles will be contained in one of the following styles: h1 These are the default classes used for headings. I have found that editing the files through the Joomla Admin can be a bit quirky with my amendments not saving correctly. You can download the template.css file to your computer using an FTP program or a Web Development program like Dreamweaver. Open the template.css file Search for the coding that I have displayed above Edit the parameters Save your file Upload it back to your server in the same directory you downloaded it from Note: It is always good practice before editing a file to keep a copy of the original so if anything goes wrong you can upload the original and start again If you want to get started quickly then Subscribe to my Free Joomla! Tutorials by clicking on the link below: Get your FREE Joomla! Tutorials now by clicking this link!
|
Advertising
Useful Links
Using Joomla!
