How to integrate and use google fonts into website

To use google fonts into your website / html, you just need to follow below steps,

To start with read the google font getting started guide from

We will take the same html example as mentioned in getting started guide and modify to change it to various different google fonts,

Copy and paster below code into /var/www/html/test-google-font.html

$ sudo vim /var/www/html/test-google-font.html

<link rel=”stylesheet” type=”text/css” href=””>
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
<div>Making the Web Beautiful!</div>

Now, open a browser and type http://localhost/test-google-font.html ,
this will open a page like below,


Now, lets say you want to change the font to something else, here
you can also take a help of typecast to verify how certain font looks
like in runtime, typecast url :

To change fonts, open google fonts URL,
browse to the font you want to be used in your html code, for ex. you
want to try “Open Sans” i.e. the first font shown on the homepage of
google fonts URL, then click “Add to Collection”from right side of row,
once that’s clicked, a window like below opens


From above window, click “use” and you will be shown the steps for how
to integrate the code into html, javascript etc. and also how to
modify CSS.


Android Android Commands Android Java Applications Application Libraries Application Stack / User Interface Bash / Shell Scripts Commands and Packages Compilation Content Management System - CMS Core Kernel C Programs Development & Build Development Environment Setup Errors & Failures Flutter git Go Language Programs Hardware Platforms HTML JAVA Programs Kernel & Device Drivers Linux, OS Concepts and Networking Linux Device Drivers Linux Host, Ubuntu, SysAdmin Linux Kernel Linux Networking Middleware Libraries, HAL Monetization / Google AdSense NDK / Middleware / HAL OS Concepts PHP Programming Languages RaspberryPi Scripting and Automation Search Engine Optimisation ( SEO ) Social Media Socurce Code Management ( SCM ) System Administration, Security Testing and Debugging Uncategorized User Interface Userspace Utilities Web design and development Wordpress Yocto / Bitbake / Openembedded

Leave a Reply / Ask Question