font

How to Add Custom Font to Website

Spread the love

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.

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


Spread the love

Related Posts

Leave a Reply

Your email address will not be published.