Font family plays a great role to make a web page beautiful and more user-friendly. There are several methods to add font family on a Web Page. The common and easiest way is to get the required font family from the Google Fonts library, but you can not find all fonts in Google Fonts. At that time you need to download those fonts, then you need to search for their official website who created that font family and you need to integrate it yourself. Here in this blog, I will explain both the way of font family integration to your website.
- Google Fonts (Free)
Google Fonts provides 1400 + font families for free. It is comparatively the easiest font to add to your site. You just need to add a link to fonts inside the header tag then you can use the font family. You can get official documentation here.
You can view the google font library here.
2. Adobe Fonts (Premium)
Adobe Fonts contains a collection of 20,000 + amazing fonts. The new and improved service now gives Creative Cloud subscribers easy access to their entire font library with a single click. Adobe Fonts has removed page view restrictions and made all its fonts available for both desktop and web use.
3. Custom fonts
Sometimes you need to add a file of font family to a web page. At that time you need to download the font family file. Then inside the style tag, you need to add a @font-face rule as shown below.
@font-face{
font-family: 'GlacialIndifference'; /* you can use any short name */
src:url("./fonts/GlacialIndifference-Regular.otf"); /* path of font family file */
}Now, you can use the font family by using the font-family name that you added inside the font-face rule.
I hope, this blog really helped you to fix your issue. if you have any queries or suggestions. You can connect with us through the contact section. We are also available on YouTube. Don’t forget to share and subscribe to us. Thank you for your valuable time. Have a nice day ahead.