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 = 'https://fonts.googleapis.com/css?family=Sofia' rel = 'stylesheet' /> < style > h1 { font-family: Sofia; color: green; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > </ center > </ body > </ html > |
Output:
Example 2:
html
<!DOCTYPE html> < html > < head > < style > @import url( https://fonts.googleapis.com/css?family=Open+Sans); h1 { font-family: 'Open Sans', serif; color: green; } </ style > </ head > < body > < center > < h1 > w3wiki </ h1 > </ center > </ body > </ html > |
Output:
Contact Us