Welcome, today we are learning How to Add Custom Font to a Website.
Adding a unique font to your website is a great way to make your design more attractive.
In this blog, I will walk you through the step-by-step process to add any font to your website.
Note: As we all know that not all websites are built and managed in the same way, I will introduce the most universal approach to adding custom fonts and then explain how the most popular website building platforms support custom fonts.
Table of Contents
How to Add Custom Font to Website
There are two methods of adding custom fonts on the website which are mentioned below.
- Enter Online Link (Online)
- Download Font File and Use Font (OffLine)
How to Add a Font to Website Online
In the online website, two types of fonts are added, which we will see below.
Online font can also be done by placing direct links and by importing in style we can also change font online which we will see below with the example
Change font style by entering an online link on the Website
You have to close your head tag to the link of the font, after that you will have to enter the link, then in your style, enter the name of the font in font-family: I will tell you to step by step.
Step1: Search Google Font
open your Google and search https://fonts.google.com/
Step2: Select one Font Style
Click Select This Style Button
Step3: Copy the link and paste it into your index.html page
copy link code
Step4: Open your index.html file
Paste the copied link here in the index.html file above the close head tag
Step5: Return Open Your Google Font Page
Open select family and copy the font-family code
Step6: Return Open Your Index.html File.
Open your index, html file and then paste the code here
Output:-
Change the font style by entering an online link Import URL on the website
Font style can also be changed by importing the URL on the website, in which we have to paste the import URL in the style and keep writing in the font-family in the property in which to apply, your website font style will change.
Step1: Copy This Link
Open selected family then click on @import button and copy code.
Step2 : Open your Index.html File.
Copy and paste the import URL inside the style
How to Add Fonts to Website by Downloading Fonts
How to add fonts to website by download font then we will first download the font which we want to apply in website and then we will extract zip file.
how to add fonts in website by download font then we will first download the font which we want to apply in website and then we will extract zip file. And out of that. .ttf file he will paste the index.html file and in index.html file we will change the font style using @font-face under style
Example:-
<style type="text/css">
@font-face {
font-family: Font-name;
src: url(Font-file-name.ttf);
}
p {
font-family: 'Font-name';
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
@font-face {
font-family: Roboto-Bold;
src: url(Roboto-Bold.ttf);
}
p {
font-family: 'Roboto-Bold';
}
</style>
<body>
<h1>How to add custom Font to Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>Output:-
How to Google Font Add in Website?
How to add Google font to the website, I have told step by step above that how can I change the font style by downloading
