How to Use Custom Fonts in HTML
By Nilarjun DasIn this HTML tutorial, we will learn how to use custom font in HTML with examples.
Design and Simplicity are the key aspects of a website. The better the presentation of a website, the greater is the user retentivity. One of the aspects of good website design is the usage of appropriate fonts.
By default, a lot of fonts are available to use in our web pages without importing fonts from another source. But we may want to use some custom font which appeals more than the other available fonts. In this case, we need to import this font explicitly in order to use it.
Best ways to use custom font in HTML
There are two ways by which we can easily import the custom font:
- Using the @import rule
<style>
@import url('path to the font file');
</style>- Using the <link> tag
<link href='path to the font file' rel='stylesheet'/>
Both the syntax should be enclosed within the <head> tag. Now let’s look at examples of importing and using custom fonts using both the ways.
Example 1: Using @import rule
<!DOCTYPE html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Cabin&display=swap');
</style>
</head>
<body>
<center><element style="font-family: Cabin; font-size: 50px;">
This is a test message.
</element>
</center>
</body>
</html>
Example 2: Using <link> tag
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cabin&display=swap" rel="stylesheet">
</head>
<body>
<center><element style="font-family: Cabin; font-size: 50px;">
This is a test message.
</element>
</center>
</body>
</html>Output:
Read more Tutorials:
Leave a Reply