Web Fonts e.g., Google Fonts
Google and other online web fonts can be used in webpage font typefaces created with CSS in an HTML webpage. So that you can display proper web content in multiple web browsers and electronic devices gadgets. Where in web font selection, you have many online Google and other font selection options.
So, let’s use online Google font through CSS in our existing HTML website.
Choosing Google font through CSS in HTML web page.
First of all, move to the official website of Google font to browse the online Google fonts available for your web project website. Now here you can manually select any one of the fonts from the Google font selection such as serif, sans-serif, display, handwriting, and monospace as per your web development requirement and embed it in the webpage.
Embedding a font with CSS in HTML web page.
Once you have manually selected the font for your existing HTML webpage. So you can directly embed or insert it in your existing website webpage project.
So let’s embed font in html webpage using CSS.
Step 1: First of all select the Desire font manually.
- Here you manually click on the font which you want to use in your existing website project.
- Next you select the font style (weight, italic) etc. behaviour as per your web development requirement.
- Now manually click on the “+” button to add the Desire font to your existing web project.
Step 2: Now receive the Desire font embed code.
- Here after manual font selection, you will get a pop-up preview at the bottom right of the page.
- Now click on that option to access the font embed option for the existing web page.
- Finally, to embed the Google online font, manually copy the <link> tag given in the “Embed” section.
Online Google font embed example in HTML web page css script.
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;800&display=swap” rel=”stylesheet”>
Adding online Google fonts link to existing HTML webpage css.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Html Web Fonts Css Example</title>
</head>
<style>
body {
font-family: ‘Roboto’; /* Here You See We Use Google Font */
margin: 4;
padding: 10px;
background-color: yellow;
}
h1 {
font-family: times new roman;
font-size: 3rem;
font-weight: 900; /* Make Heading Font Weight Bold */
color: red;
}
p {
font-size: 1.7rem;
font-weight: 300; /* Set Normal Font Weight */
color: blue;
}
</style>
<body>
<h1>Use Online Google Webfont In Html Web Page</h1>
<p>You Can See How Web Font Use In Your Web Page</p>
</body>
</html>
Using online fonts in CSS in HTML web page.
Here you can embed the desired Google font in CSS in your webpage using font-family code property.
Font Embed Example in CSS.
body {
font-family: ‘Roboto’; /* Here You See We Use Google Font */
margin: 4;
padding: 10px;
background-color: yellow;
}
h1 {
font-family: times new roman;
font-size: 3rem;
font-weight: 900; /* Make Heading Font Weight Bold */
color: red;
}
p {
font-size: 1.7rem;
font-weight: 300; /* Set Normal Font Weight */
color: blue;
}
Online font, font weight, and font styles attributes.
When using font styles and font weights in your existing HTML web page, make sure to link them properly in <link> tag in the head section of HTML webpage. For example, if you want to add regular and bold weight font attributes in your web page, then you can include it in the below way.
font, font weight, and font styles Example.
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>
Customize fallback font in CSS script in HTML webpage.
Adding fallback fonts is a good method in case the online Google fonts are not loading properly in your existing web page. Here you have to indicate them properly in your font-family declaration.
Fallback font HTML webpage example.
body {
font-family: ‘Roboto’, ‘Helvetica Neue’, Arial; /* Fallback fonts */
}
Online Google Fonts usage instructions.
Use limited fonts in your existing HTML webpage. Always remember that using too many online Google font families or font weights can slow down the loading time of your website.
Use only those online Google fonts in your desired web project that you really need. Choose the desired font weights and styles instead of loading all the available online font options in your project.
Using Google fonts in HTML web page with the help of css.
Using online Google fonts can improve the font, font style, font weight, typography of your existing HTML website. With online Google fonts, you can preview your webpage attractively and commercially. By embedding online Google fonts here, you can provide better typography to any of your websites.
