Adding Google Font Link to the Joomla Website

At the time when you create your joomla template design and defines any font that used in the css file so that the font displayed as your desired. The happen is when the font that specified on the css template, it will call the fonts that contained in the operating system for presenting the text style that intended. For the common fonts it was included in the operating system such as Arial, Times New Roman, Tahoma, etc, that is not at all. But when you use the special font for design that you have designed with a certain size, it will possible  to be changed. It could be what is displayed on your browser screen is not the same for all those who visiting your site. It is depending on the fonts that are contained in them.

Therefore be careful when you use any font that is not common used, because it can cause your website look cluttered on the screen browser other people who open your site. The Solution of it can be overcome by including a link font on external and internal css on your site hosting. Here I will explain how to add a link of google fonts on joomla site, so that the display of your text on the site safe on the other displayed on your visitor. The link will we insert  as the following format:

That means that we are going to add a link of google font  at the head of the template that we use. Here I am going to implement how to get  the link fon that we will use from google fonts to our  joomla site. Implementation on the blog about the same logic and already much discussed. As much as possible we will make anything without extensions  if we can make by self on our joomla site.

Our target is to the index.php and css template  that we used on joomla administrator. Then we will add any font  link in the header of index.php and call font family on the css script using fonts that we have chosen on google font.

1. Firstly go to google font and select the font that you want to be used. Here I choose Great Vibes font that is a kind of special handwriting font that is certainly rare visitor used this font. Then select “quick use” icon as the middle picture below. After that  will occur the link of particular font with  font-family. The  Link that was given, you add to the index.php of your  template and the font family to replace the font in any css script template that we will change.

 

2. Sign in to the joomla administrator, then click on the tab menu Extensions>Template Manager. On the template manager click on the part that I marked in red like the right picture below, on the active of the joomla template.

After that you will come to the customize template, and then click on the Edit main page template (see the left picture below). Then you will arrive to the index.php of your template. On the head section add the link of the google font that you get when you chose any  font  as the step 1. On the head section there are some internal css link that define the template (see the right picture below).

The result as shown like the picture below.  The link will call particular font from google font when when you call the font family at any css script that you have on the css template.  And  then you save that index.php.

3. Still in the customise template on the template manager, click on css template as shown like  the left picture below. Then you  find the css script on your template that you want to use the fonts from google font by changing the font family on css template. Here I use a font family from google font by changing the font family on the text slogans of my joomla site, such as the right picture below.

With the way like this you do not have to be afraid anymore to use special fonts on your joomla site. Using any particular font from google font, the style font on particular part your site that you have designed will be displayed  the same like you see to the you visitors independently of the system font that they have.  That was all about using google font to your joomla site for more details let’s see the following video! good luck!