How to Add a Custom Font to your Joomla Template

Joomla is the second most popular content management system. In simple terms, it’s a platform on which you can create any website. The usage of font templates gives the newly created site personality and the original design makes it visually comfortable for visitors and attracts more users. To start working with the service, you first need to download the font packs to a computer. The article will teach you how to use a custom font on a Joomla site.

In 2005, project developers decided to release a new platform for creative web users. The first version of Joomla offered many extensions and templates. The modern updated program has the following technological features:

• rich functionality—the service is constantly being improved by acquiring new modules and plugins
• easy template system, which is understandable even for beginners—the positions of all modules, fonts, background colors, and other functions are arranged in a convenient order;
• big directory of fonts—since the introduction of Joomla, a huge number of both paid and free colorful templates have been created
• the presence of an internal media manager that allows to upload your own files to the site
• flexible and functional mechanism for separating users by access rights to site elements
• the ability to set the start and end dates for the publication of materials—this function is convenient for meeting deadlines and schedules and is also suitable for busy users
• the ability to create restricted areas on the site, access to which is allowed only to individual users
• the ability to administer from the user part of the site if there are appropriate access rights

Despite a large number of serious advantages, the platform continues to develop both in terms of functionality, security, and speed of work.

Among the main advantages in working with the service, customers highlight:

• intuitive admin panel interface—even inexperienced beginners will be able to create a good website using Joomla
• convenient mechanism for creating and displaying menus, unlimited nesting levels
• open source code
• the presence of a functionally rich materials manager—this feature allows you to publish an unlimited number of materials and even divide them into categories
• convenient module system that displays the data required by the user in various positions on the web page
• versatility and ease of setup—the program is easily configured individually for each user
• a wide community of users and constant updates that fix the found errors and improve the security of the system
• multilingualism—the CMS has introduced multilingualism support, which allows you to display content in various languages on the site pages

It’s not surprising that the platform occupies such high positions in the market and is liked by so many website users. Developers are constantly making additional changes to the design and making the process of forming sites easy and entertaining. Now we’re going to show you in detail how to install and use a font.

In order to use your own custom font on the Joomla platform, you need to:

• Download a file from the Internet or copy it from the System folder.
• Go to the platform's website and paste the downloaded file there.
• Upload an archive with the contents.
• Import custom fonts into HTML.

Although the installation process consists of only a few steps, it has several nuances. Let's look at each action separately.

Any font is suitable for use. You can install a font online from any available site or find it in the «Fonts» folder on your device. It’s important to note that this service supports only a few formats: TTF (TrueType font), OTF (OpenType font), WOFF (Web Open Font Format), or EOT (Embedded OpenType).

After the file is downloaded, follow the link to the website www.font2web.com. When you open it, click the "Choose File" button.

Select the font and click "Convert and Download." The program will make a zip archive from the selected file. From there, we only need the Fonts folder and the CSS file.

Copy the entire contents of the Fonts folder and then upload it to the following address on the service, the link to which is indicated below: the templates folder/your template name/css/template.css on the server. Before downloading, make sure that the files have access permission 644.

This action is the longest and most difficult of all, so follow the steps below:
1. Open font.css and find the URL attribute in this file.
2. There will be lots of links located there. Fix the fonts/XXX.xxx link to ../fonts/XXX.xxx (add two dots and a slash at the beginning).

3. Change the font-family attribute so that its name matches the names of other files.

After the actions performed, you can add your CSS custom font to any element using the font-family attribute. To do this, you need to add this code at the very bottom of:
templates/your template name/css/template.css.

Code .icemegamenu > ul > li > a.iceMenuTitle is an element of a specific sector. Font-family can already be used in another file, and to replace it, you must either find this place in the code and put your font name instead of the old one, or add the «important» parameter.

The final code of the downloaded font should look like this:

Save all the changes in the templates/your template name/css/template.css file and upload it to www.font2web.com. Now you know how to add custom fonts to CSS. The new font is ready for use!

Now you know how to install and apply your own fonts on the platform. This popular program is suitable for both beginners and experienced developers. For the past ten years, the service has been a leader in the market, helping to create beautiful and customized web pages and delight all users.