🔧 How to add Google Fonts and Custom Fonts to your Web App

Fonts are a core part of any web application’s design impacting everything from readability to the overall user experience. As developers, it’s essential to know how to add and manage fonts effectively. This guide will take you through two key methods: Integrating Google Fonts and adding Custom Fonts using ‘@font-face’ rule
 

Why Fonts Matter in Web Development

Fonts are more than just a design element. The right font can make your web app more engaging and user friendly, while the wrong one can detract from the user experience. So, let’s dig into how you can seamlessly incorporate fonts into your web projects
 

Adding Google Fonts

Google fonts offers a wide range of free, high quality fonts that are easy to integrate, Here’s how to do it

1. Choose your font

   • Go to Google Fonts
   • Browse or search for the font you want

   

   • Click on the font to see its details and available styles
   • Select the styles you want to include and click on Get Font

   
    

2. Embed the font

   • Click on Get Embed Code button

   

   • After selecting your font, Google Fonts gives you a couple of ways to add it to your project. Under web via a <link> tag in your HTML or by importing it through CSS, let’s see both of them

   

   • Using <link> tag in HTML
     • Copy/Paste the embed code in your HTML and apply the font in your CSS file

   

   • See the code below:

   

   • Output :

   

   • Using **@import** rule in CSS :
     • Copy and Paste the import rule code under web and import option on Google Font at the top of the CSS file

   

   • As you can see in the code below, i have added **@import** rule at the top of the CSS file

   

   • Output:

   

Adding Custom Fonts

Sometimes, you might want to use a custom font that isn’t available on Google Fonts. The @font-face rule let’s you host and use any font you have the rights to, offering you full control over your typography
 

1. Get the Font Files
   You can find free fonts from the internet in common formats:

   • .woff (Web Open Font Format)
   • .woff2 (Web Open Font Format 2)
   • .ttf (TrueType Font)
   • .eot (Embedded OpenType)  

2. Define the @font-face Rule

   

   • font-family property is a required field which lets you name your font. You can name it whatever you want.
   • src property is a required field where you need to provide the path or a URL from where the font can be downloaded
   • font-weight is used to define the boldness of your font, default is normal and we have used bold

   There are more properties you can to customize your font, check here

3. Apply the Font

Just like any other font, apply it exactly like this in your CSS file, see below

See output screen below:

Conclusion

Adding and managing fonts in your web apps is an essential skill for any developer. Whether you are using the convenience of Google Fonts or the control of custom fonts, these methods ensure your app looks great and performs well. With the right approach, you can create a more engaging and visually appealing user experience ensuring the consistency of the font all over your web application.