Using Google Fonts
Using Google fonts is a quick easy way to get beautiful fonts for use on your website. Google fonts are used everywhere, are always available, and likely even cached in your visitors browser for faster loading.
Fortunately, it’s super easy to use Google Fonts on your own website.
Add Google Fonts To Your Website
To add Google Fonts to your website, just follow these steps.
- Go to fonts.google.com
- Search for first font you want to use
- Click “Get Font” Button
- Click “Get Embed Code”
- Copy code it gives you
- Open code editor and paste this code in the head section of your page
- Apply the font family to the text you want to style
- Give a fallback font
- (Optional) Add another font on google fonts
- (Optional) Copy the new code and replace the previous code.
- (Optional) Apply the additional font family to other elements
A Sample Google Font Code In Head
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Test</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
>
</head>A Sample Google Font Applied To Elements In CSS
<style>
.text, .more-text {
margin-top: 200px;
font-size: 32px;
text-align: center;
font-family: "Poppins", sans-serif;
}
</style>
See more WordPress How-To’s and Front End Developent How To’s