When you have an initiative to launch your website, the conversion goal becomes your bread and butter. You might have invested your utmost endeavor to attract your visitors. But your catchy headlines and descriptions still fail to pin visitors on your website. If you're desperately striving to reach to your conversion goal, then I have a well-researched solution. The solution is Typography.
In 2006 Oliver Reichenstein wrote Web Design is 95% Typography. Some people love it, some get amazed. So, be focused on. If you're focusing mostly on other element of your website rather than typography, you might be on wrong traction. There are a number of elements of typography, but choosing an incredible font is considered most important of them.
When you have an initiative to launch your website, the conversion goal becomes your bread and butter. You might have invested your utmost endeavor to attract your visitors. But your catchy headlines and descriptions still fail to pin visitors on your website. If you're desperately striving to reach to your conversion goal, then I have a well-researched solution. The solution is Typography.
In 2006 Oliver Reichenstein wrote Web Design is 95% Typography. Some people love it, some get amazed. So, be focused on. If you're focusing mostly on other element of your website rather than typography, you might be on wrong traction. There are a number of elements of typography, but choosing an incredible font is considered most important of them.
Finding a font sounds time consuming and costly, But don’t worry Google has been supplying the community with a large collection of web-based fonts for quite a few years. At the time of this writing there are 651 font families available at Google font Library . You can filter all fonts by specific categories and font characteristics.
The included Categories:
- Serif
- Sans-Serif
- Display
- Handwriting
- Monospace
The included characteristics:
- Thickness
- Slant
- Width
There are numerous CMS over the web, and each of them comes with their own philosophy. You might follow unique way to add Google font for each and every CMS. Now the question is how we add Google font in Joomla websites? So, don’t worry just follow, I answer in steps below.
Step 01
For Joomla we have to import Google font stylesheet in the website backend. To do this first we need to get a stylesheet link from Google Fonts. I’ll be using Open Sans for this quick tutorial. Let’s head over to the Google Fonts library, search for Open Sans, and click on Quick-use icon to your desired font.
Step 02
When you click on the Use button, It opens up a details of your individual font with couple of control handles. On font details screen you can choose what weights and types of the selected font you would like to make use of on your website. The more interesting thing is documentation of the load time with the Page Load graphic seen in the image below.
Step 03
After selecting the weights and styles of your fonts, scroll a bit down and copy the line of code from list number 3 under import tab which looks like this:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,700,600,300);
Step 04
When you copy the import link, head over to the Control Panel => Template Manager. click on the default template from Template column.
After clicking of default template (My default template Protostar), you will land on Customise Template page. Open template.less file form LESS folder , paste the copied code in template.less file (you can paste the code on any other LESS file) and click Save button. Make sure you have complied LESS clicking on Compile LESS button at the upper right corner of the screen. follow the below image.
You will probably also notice the familiar font-family of CSS styling like this, Copy this code from Google font details page underneath the imported code that we pasted in template.less file. font-family: 'Open Sans', sans-serif;
When you copy the following code, back to template.less file again and paste the code (font-family ) in the CSS element where you need to include the font. The code could be like this:
body{
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 14px;
}
or
h1,h2,h3,h4,h5 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
The process has been shown above could be different based Joomla Framework, If you are using ThemeXpert template, you can include imported and font-family code in the scaffolding.less file. Just like this.
If you think the above process is difficult, don’t worry Expose Framework has an awesome core feature to change Google font from Joomla Admin. Head into the Template Manager. Click on the default template(my default template is bolt) from style column, and click on Typography from the left sidebar of the screen. Here in this panel you can choose almost all Google font from Check Google Font Directory for Body, Menu, Heading and Module. After selecting your desired font click save and close.
Conclusion
Adding Google font in the core Joomla file almost similar to all Joomla websites, But each template clubs with their personal framework could provide easy and unique technic of adding Google or any other fonts in a Joomla website. You can see ThemeXpert Expose Framework made easy to add Google font for their users. So, feel free to comment, how you change or add Google fonts in your websites?
