On

If you want to use Google Font, or any other Custom Font locally in your HTML Website, then this article is for you. You will have to visit

to download your favorite font. For example Noto Sans font or Ubuntu font. Now here is the Code. 



<head>
<style>

@font-face {
  font-family: "Noto Sans";
  src: url('fonts/Noto_Sans/NotoSans.eot');
  src: url('fonts/Noto_Sans/NotoSans.eot') format('embedded-opentype'),
       url('fonts/Noto_Sans/NotoSans.woff2') format('woff2'),
       url('fonts/Noto_Sans/NotoSans.woff') format('woff'),
       url('fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf') format('truetype'),
       url('fonts/Noto_Sans/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype'),
       url('fonts/Noto_Sans/static/NotoSans_Condensed-Black.ttf') format('truetype'),
       url('fonts/Noto_Sans/static/NotoSans_Condensed-BlackItalic.ttf') format('truetype');
}


body {
  margin: 0;
  background-color: #691983;
  color: #ffffff;
  line-height: 1.2;
  font-family: "Noto Sans", Ubuntu, Tahoma, "Trebuchet MS", sans-serif;
}

</style>
</head>


Or something simple


<head>
<style>

@font-face {
  font-family: "Ubuntu";
  src: url('Ubuntu.ttf') format('truetype');
}


html
* {
    font-family: Ubuntu, Tahoma, "Trebuchet MS", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

</style>
</head>



1st Example Code is little complex. It means you will have to keep all fonts inside "fonts" folder in main/root folder. 2nd example code means you will have to keep the font directly in the main/root folder. 



What can I do with this Code?

  1. You will not have to depend on Internet Connection to fetch font from outside source, like Google Fonts. You can download and use independently. 
  2. You will not have to depend on the fonts installed in your Windows or Mac PC. Even you can send the copy of of your HTML website to your client by email or by pen-drive. Your client will never need to install those custom fonts manually in Windows or Mac PC. 
  3. You can create Android WebView app easily. Following this same way, you can keep any fonts inside assets folder and use it locally.



If I want to upload to server to create a real website?

Simply upload everything to server by cPanel. It will work instantly and automatically. if you keep NotoSans.woff in your local fonts/Noto_Sans/NotoSans.woff folder, the address will be www.example.com/fonts/Noto_Sans/NotoSans.woff



Just a reminder

But if you want to use font directly from the source, here is the Code.  Embed code in the <head> of your html


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">