Google Fonts is a site where there are several types of fonts, from the most used to the lesser known, with it you have the option of downloading the font, or even import links from each font and use them within your site, system, or even within Scriptcase. In this post we will be teaching how to use those fonts in Scriptcase in a fast and easy way:

Step 01 – Visit Google Fonts website: https://www.google.com/fonts

Step 02 – Choose the font of your interest and click “Quick-use”:


Step 03 – Choose the types of fonts you want and select the check box:


Step 04 – Choose the way you want to put the font in your website or system, in this example we will use the “@import”, so this way we will be taking the import code to add within CSS, so click at @import and copy the two lines available:

Okay, we already have the import code to use within Scriptcase. Then we will access it.

In this example we created a control screen with 3 text fields and 1 HTML image. We will open the onLoadAll event.


Step 05 – We need to open the tags <style> </style> to add the CSS. For this:



Step 06 – We will paste the import code of Google Fonts site:

@import url(https://fonts.googleapis.com/css?family=Overlock);

Step 07 – In the title of the application (the place is where we will make the change of the font style), we will add a <span> tag with a class before the text that will be the title, so (do not forget to close the tag after the title </span>):
Layout Scriptcase


Step 08 – Back in the onLoadAll event, now add the CSS code that will be responsible for changing the font style:

@import url(https://fonts.googleapis.com/css?family=Overlock);
span.font-cab {
font-family: 'Overlock', cursive;

That’s it: with these changes we will have the change of the font, you can now use your creativity and change your applications with different fonts of Google Fonts and leave your site or system with a more attractive layout.

This change was made to the fields too, check how was the result:



One thing is for sure, you can bring to Scriptcase anything that you are able to do outside Scriptcase but you will have less effort. Give Scriptcase a chance and use it for 20 days for free at www.scriptcase.net

You might also like…

Scriptcase v9.2 – All you need to know about it

Have you heard the news? Scriptcase has a new release (v.9.2), and today we will take a look at some...

Cache technique in PHP

Cache technique in PHP In this example we will check the actual optimization using a small scri...

A look at Scriptcase 9

In a daily basis this tool has given me great satisfaction, and very good and fast results in terms ...

Comment this post

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.