In this tutorial we will show you the solution of how to add font family in CSS, using a unique font on your website is a great approach to make your design stand out in the crowd. Designers were confined to popular system typefaces like Arial, Helvetica, Verdana, and Times New Roman at the beginning.
Image replacement or plugins like Flash were the only ways to use bespoke fonts reliably. But now times have changed and this tutorial will show you how to add any font to your website in a step-by-step manner.
Step By Step Guide On How To Add Font Family In CSS :-
If a system typeface makes your marketing manager squirm, there are a number of repositories that offer a large selection of open-source typefaces that may be served using a content delivery network. Among the most popular choices are:
- Google Fonts
- Font Library
- Adobe Edge
Google Fonts has a large library of over 1000 libre fonts that may be browsed through their interactive web directory.
Google Fonts are perhaps the easiest fonts to add to your site thanks to their Developer API, and this is where I would start your search.
We'll be using Google Fonts for this tutorial.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
body {
font-family: 'Muli', sans-serif;
color: rgba(0, 0, 0, 0.8);
font-weight: 200;
line-height: 1.22;
letter-spacing: -.004em;
font-size: 30px;
padding: 100px;
}
h1 {
font-family: 'Quicksand', sans-serif;
font-weight: 800;
font-style: normal;
font-size: 40px;
line-height: 1.17;
letter-spacing: -.03em;
}
</style>
</head>
<body>
<h1>Custom fonts</h1>
<p>
This is a sample text
<p>
</body>
</html>
- To begin, type <! DOCTYPE html> that indicates that the file is in HTML format to the web browser.
- The < html> element, on the other hand, is used to indicate that HTML content is about to begin.
- The information about web pages is now contained in the <head> tag. This tag uses the< title> element to provide a web page title. The <head> and< title> tags, for example, are paired tags. As a result, both have the closing tags </head> and </title>.
- Finally, the <body> element is used to specify the webpage's content. All of the content for the website will be written here. We used a header tag of <h1> and a content tag of < p>.
- For the <body> and <h1>, we imported the Google Fonts "Muli" and "Quicksand," respectively.
- The font family for each of the elements (<body> and <h1>) was then specified.
- In the head tag, a <style> tag was used. The two elements were then styled individually using characteristics such as colour, font-weight, font style, font-size, line-height, letter-spacing, and others.
- The closing tags for the <body> and <html> tags are< /body> and </html>, respectively.
Conclusion :-
You can change the type, size, and colour of your font with some basic web design expertise.
This allows you to personalise every aspect of your website and improve the readability of your information.
Follow the procedures above and leave a comment if you have any questions. I hope this tutorial on how to add font family in CSS helps you.
About Ashish
