HOW TO ADD GOOGLE FONTS TO A LANDING PAGE

I will be using a script from fonts.google.com and this is a quick blog post and short video showing you how to do it if you are a beginner.  Right below is a screen shot from the website and I have highlighted in light yellow the actual address and on the right you can see I have circled the categories you can choose from.  Limiting your choice can lessen the search time because there are many fonts available.

google-fonts-screen-capture-with-circles

google-fonts-selection-screen-shot-with-body-tagNext screen shot shows you how the font can be used.  I have circled in black the download arrow that appears in the upper right hand corner.  Then you have a link to the actual style information for your css.  This tag goes somewhere between the <head></head> tags.

I also typed below in red how it would look when you added the reference to the body tag  This tells the browser to show the font on your website in Kaushan Script, the color will be black and the font-size will be 14px.

Google makes it really easy by “hosting” the fonts and we only have to link to them.  They have so many beautiful fonts on the website.  You won’t get bored.  You will find a perfect font for any project.

 

 

BELOW YOU CAN SEE A VIDEO EXPLAINING IT LIVE:

Tagged with: , ,