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:
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:
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:
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.