Custom Fonts

In this blog we will change the font of our RD web site at http://localhost/dbnetrd.

 

Prerequisites

(1) Complete the Hello World exercise and have your responsive design web site ready at http://localhost/dbnetrd. 

(2) Complete the Resource Files exercise.

Your developer tools are at: http://localhost/dbnetrd?ac=dev 

Your RD web site's physical folder is at: c:\inetpub\wwwroot\dbnetrd

Your theme file is at c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css

 

Objectives

Change the font family of the the text "hello" on your hello page to "Anton".  Anton is a font family that can be obtained from Google (no licence should be needed for this exercise).

 

Obtain and change the Font

Select the "Anton" font from Google:

https://fonts.google.com/specimen/Anton?selection.family=Anton

Copy the Import link for the Anton font:

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');

Open your theme file c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css in Notepad and paste the copied @import link at the start of the page.   Move to the end of the document and find the previously added section:

h3{

    color:red;

}

 

Add the Anton family font to h3 as follows:

h3{

    color:red;

    font-family: 'Anton'

}

Save the file and close.

The above method sets the designer's own elements to that font as well (in general this should not be a problem but it may be confusing for the developer). To avoid this the following method can be used:

#dmain *{

   font-family: scylla;

}

#dnav *{

   font-family: scylla;

}

#dfooter *{

   font-family: scylla;

}

Done!

 

Note browser's caching!!

Please note that browsers aggressively cache css files amongst other file types.  In order to be able to see your changes to your style sheets (css files), we recommend that you open Chrome's developer tools open (F12), select the Network tab and tick "Disable cache". For the rest of this exercise, please keep the Chrome developers tool open. 

 

Test Point

In a new Chrome browser TAB, make sure that Chrome developer tools are open (F12) and navigate to http://localhost/dbnetrd?dbpage=demo-hello

Press CTRL+F5 to refresh the page.  You should see the word Hello in red colour and in Antone font.