Freeola Home Get Dotted Domains Win Free Games Freeola Blog Freeola Guides Customer Forums

Freeola Guides

Adding Web Fonts

By Freeola Support on 11th December, 2017 | 0 Comment(s)

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.


Adding Web Fonts


Step 1: From the Main Menu, select Custom Code & Snippets from under the Website Tools heading.


Main Menu


Step 2: Select the Custom < head > Code tab.


Custom Head Code


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


We've chosen Open Sans Font, click the Quick-use button, as shown in the below image.


Quick-use Button


Step 4: The third section on the Google Fonts website is titled Add this code to your website.


Above where the code is displayed select the Javascript tab. Copy the code displayed, and head back to InstantPro (don't close the browser yet).


Copy JavaScript


Step 5: Paste the code into the Custom < head > Code input field.


Paste JavaScript


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, the last section of the page is titled Integrate the fonts into your CSS, Copy this code and head back to InstantPro.


Copy CSS


Step 7: As the second piece of code is only a CSS style, you'll need to include a Style Sheet under the JavaScript code. It should look like the image below.


CSS Style Sheet


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.


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 View Website link in the InstantPro header and navigate the pages.

Did you find this article helpful?

Yes | No

Article Comments (0)
There are currently no comments on this article.
Add your comment:

Comments are limited to 750 characters, you have 750 remaining.

Freeola & GetDotted are rated

Check out some of our customer testimonials below:

...the excellent service I have always received from Freeola.
I do know some people using very expensive domain hosting who do not get a service any where near as good as I receive, I would just like to say that the service is appreci...

View More Testimonials

Simple, yet effective...
This is perfect, so simple yet effective, couldnt believe that I could build a web site, have alrealdy recommended you to friends. Brilliant.

View More Testimonials

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.

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, or Opera will provide a better, safer browsing experience for you.