As per the requirement sometimes web developers have to use an external custom font style. And this requirement can be fulfilled by Google font. There have many websites to fulfill the requirement. But the reason behind why I choose this place because google font most user-friendly, fast, and reliable.
Here in this blog, I will share some steps to add google font to your website code. Also, I had already uploaded the full video tutorial on our YouTube channel. You can also check out our video.
Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content.
Steps
 |
| Step 1: Search Google font in any browser or go to this link font.google.com |
 |
| Step 2: After opening the website choose any font face |
 |
| Step 3: Select any font style |
 |
| Step 4: Two way of getting code |
 |
| Step 5: Copy the link and paste your HTML code (Method 1) |
 |
| Step 6: Paste the code in your HTML file |
 |
| Step 7: Add the CSS code |
 |
| Step 8: Check the output |
You can also use method 2.
 |
| Copy the import tag and paste it into the CSS file (Method 2) |
Source code
👉 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add-Google-Font</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap');
*{
font-family: 'Roboto Mono', monospace;
}
</style>
</head>
<body>
<h1>Add google font</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, iusto. Iste iusto aperiam et dolore fugit
reiciendis quaerat ratione, asperiores laborum quisquam neque natus dolor magni quas delectus aut! Recusandae ea
aut doloremque possimus facere ipsum ipsam ex magni eaque illum tempora vero inventore quia blanditiis, animi
cum, maiores suscipit!</p>
</body>
</html>
You can support me to like this blog and share it with your programmer friends. Go to my youtube channel scoobcode and watch the full tutorial video.
Comments
Post a Comment