How to use web fonts in CSS ?
Last Updated :
18 May, 2023
While designing web pages, developers use different fonts based on what the text represents and which fonts suit the best. Each system comes with some pre-installed fonts which are called system fonts. Since these are limited, one may come across the need to use a different font other than the pre-installed one. In this article, we will discuss how to use web-fonts in CSS. Using web fonts allows developers to use fonts without actually downloading or installing those fonts into their system.
Approach 1: If you wish to use a font that is available through CDN (for example Google fonts), then you can simply select the desired font family and use the <link> tag or @import rule.
Example: Suppose we wish to use font-family “Redressed” from Google fonts, then our HTML code should look like the below.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
<link href=
rel="stylesheet" />
<style>
#mainh1 {
color: green;
font-family: "Redressed", cursive;
}
</style>
</head>
<body>
<h1 id="mainh1">GeeksforGeeks</h1>
</body>
</html>
|
Output:
Here, we can also use @import rule in our CSS. Then the CSS file would look like.
@import url(‘https://fonts.googleapis.com/css2?family=Redressed&display=swap’); #mainh1{ color: green; font-family: ‘Redressed’, cursive; }
Note: Now we don’t require the <link> tag for font in our HTML. We will get the same output in both methods.
Approach 2: After finding the desired font, we can also use @font-face in the beginning of our CSS file. Suppose we have the font URL and we want to use it in our project, then we can add the following block of code into our CSS:
@font-face {
font-family: "exampleFont";
src: fontUrl("exampleFont.woff");
}
And to use the font, we can simply define the font-family section for all the elements that we want to be displayed in this font.
Example: Now we will use the same font, i.e. “Redressed” but using @font-face. Our HTML code will look like this:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<style>
@font-face {
font-family: exampleFont;
src: url(Redressed-Regular.ttf);
}
#mainh1 {
color: green;
font-family: exampleFont;
}
</style>
</head>
<body>
<h1 id="mainh1">GeeksforGeeks</h1>
</body>
</html>
|
Note: You need to define the path of the font relative to its location inside your web server. Here we have kept the font file in the same directory as our HTML code, thus the font file name is directly written.
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...