How to import Google Fonts in HTML ?
Choosing the right font for your webpage is a very important aspect of any design. Using a web font service enables you to use a wide variety of fonts fit for presenting the data on your webpage. Google Fonts is a free web font service that hosts a huge variety of fonts to choose from. We can use these fonts in our webpages. To use a custom font, we need to import the font family from the web font service, Google Fonts, in this case.
Method 1: Using <link> tag
<link href=’https://fonts.googleapis.com/css?family=Sofia’ rel=’stylesheet’/>
Method-2: Using @import rule
@import url(‘https://fonts.googleapis.com/css?family=Poppins’);
Example 1:
html
<!DOCTYPE html>
< html >
< head >
< link href =
rel = 'stylesheet' />
< style >
h1 {
font-family: Sofia;
color: green;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
</ center >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE html>
< html >
< head >
< style >
@import url(
h1 {
font-family: 'Open Sans', serif;
color: green;
}
</ style >
</ head >
< body >
< center >
< h1 >
GeeksforGeeks
</ h1 >
</ center >
</ body >
</ html >
|
Output:
Last Updated :
04 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...