How To
To use Google
Fonts on your website, follow these simple steps:
✅ Step 1: Visit Google Fonts
Go to:
https://fonts.google.com
✅ Step 2: Choose a Font
- Browse or search for a font
you like.
- Click on it to open the font
details page.
- Select the styles
(e.g., Regular 400, Bold 700) you want to use.
✅ Step 3: Get the Embed Code
After
selecting styles:
- In the right panel, under "Use
on the web", choose <link> method.
- You’ll see something like
this:
html
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
Copy this
line and paste it in your HTML <head> section.
✅ Step 4: Use in CSS
Once the
font is linked in your <head>, you can use it in your CSS like
this:
css
body {
font-family:
'Roboto', sans-serif;
}
If you
selected more styles, you can use font weights like this:
css
h1 {
font-weight:
700;
}
p {
font-weight:
400;
}
🔁 Example HTML
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google
Fonts Example</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
<style>
body {
font-family:
'Roboto', sans-serif;
}
h1 {
font-weight:
700;
}
p {
font-weight:
400;
}
</style>
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph using Google Fonts.</p>
</body>
</html>
If you
want to use multiple fonts, just add them to your selection on Google
Fonts and copy the updated <link> tag.
✅ Use @import in CSS File
Your style.css or <style> tag in HTML should look like:
✅ Important: @import must come before any other CSS rules in the file.
Comments
Post a Comment