Adding Web Fonts
Last updated on by Freeola Support
Important Information
This guide is for the Freeola InstantPro Website Builder. This service has now been replaced by a more modern product, RQS, and therefore is no longer updated with new features.
To build your website in RQS for free, please click here or visit the RQS Builder section of your MyFreeola Control Panel.
Web fonts are typography sets you can find online from numerous sources, they will normally include downloadable snippets of code to implement them across your site. Adding a web font or fonts to different elements can be use to expand upon the font sets provided in InstantPro.
Step 1
From the Main Menu, select Custom Code & Snippets from under the Website Tools heading.
Step 2
Select the Custom <head> Code tab.
Step 3
Now you will need to go and get a font. Open a new browser tab and go to a site for fonts; such as Google Fonts Site (which will be used in this tutorial).
For this example, we've chosen Gugi Font, click the plus button, as shown in the below image.
Step 4
This will add your selection, you will see on the bottom right hand side of the screen a black bar, titled Family Selected. Click on the bar and it will display the code needed to embed the font.
From the Embed Font section, Copy the HTML code displayed, and head back to InstantPro (don't close the browser yet).
Step 5
Paste the code into the Custom <head> Code input field.
You will now need to head back to the Google Font Site as there is some extra coding needed to include the font across the site.
Step 6
Back on the Google Fonts Page, under the Specify in CSS section, there is some more code, Copy this code and head back to InstantPro.
Step 7
As the second piece of code is only a CSS style, you'll need to include a Style Sheet under the HTML code. It should look like the image below.
Firstly to start the Style Sheet it will have to start with <style> and finish with </style>
Next, assign the font style to the 'P' (paragraph) Element by using p{ - (the { is an opening for the style to be input). Next Drop a Line and Paste the second piece of code from the Google Fonts Site.
To finish assigning the style to the P Element, Drop a Line again and close the opening with }.
If you only want to change the P Element, you could end the Style Sheet here using </style>.
You can also assign the style to headings/subheadings in the same manner, for all elements H1 to H5.
Once you are done press Save and then Finish.
Please Note
Your new font will not appear in the Drag & Drop Editor.
If you would like to check that the font is displaying correctly on your site, click the Preview Website link in the InstantPro header and navigate the pages.
Live Chat is offline
Live Chat is available:
9:30am to 5:30pm Monday to Friday (excluding bank holidays).
It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, Edge, or Opera will provide a better, safer browsing experience for you.