Font Families, Sizes, Weights
In HTML web page, webpage and website design made with CSS, to improve user interface and user experience and to make the default display time of webpage fast, readable preview of web page text and attractiveness of text content, proper web page text font family, font size, and font weight should be selected according to the particular webpage.
So let’s apply CSS font properties in HTML web pages.
CSS Font Family in HTML Web Page.
The proper font family for the webpage made with CSS in the existing HTML web page defines the font typeface or font script style used for the webpage text content in your active webpage. Where instead of the default web page font, you can select the desired font from the existing font gallery as per your requirement and apply it to the desired web page text. Where you also get many types of multiple font selection options in the font family.
Some examples of fonts for CSS in HTML web page.
body {
font-family: times new roman; /* create font family name */
}
Here you get some common font family defaults.
- Monospace: Courier New, Lucida Console
- Serif: Georgia, Times New Roman, Garamond
- Sans-serif: Arial, Helvetica, Verdana
- Cursive: Comic Sans MS, Brush Script MT
- Fantasy: Impact, Papyrus
Google font selection for CSS in HTML web page.
You can import multiple Google fonts directly into your existing HTML web page from the many online Google font gallery selections for CSS text script. For this, you have to connect the proper link of that font in the meta tag of your web page.
Google font import example in CSS in HTML web page.
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>
body {
font-family: ‘Roboto’, times new roman;
}
Google font import example in css.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Google Font Import Example In Css</title>
<link href=”https://fonts.googleapis.com/css2?family=Roboto Condensed:wght@500;900&display=swap” rel=”stylesheet”>
</head>
<body>
<h1>You See the google font import example</h1>
<p>Now You See Google Import Font Roboto Condensed Example In Preview</p>
</body>
</html>
CSS font size in HTML web page.
Once you have selected the CSS text font in your existing HTML web page, the font size is displayed from smallest to largest font size. Font size can be determined for any web page using font size measurements like 1px, 1em, 1rem, %, etc. Here you can decide the font size used in CSS in the web page preview as per your requirement.
font size example in CSS in HTML web page.
h1 {
font-size: 1.5rem; /* create responsive font size*/
}
p {
font-size: 1.8rem; /* create responsive paragraph text font size */
}
CSS responsive font size in HTML web page.
In any HTML web page, using media query font attributes for CSS text font responsiveness, web developers adjust the font size for different electronic devices and display screen sizes and preview in responsive order. These fonts are previewed in increasing size according to user screen behaviour and decreasing size in the preview according to screen size.
CSS font weight in HTML web page.
@media (max-width: 700px) {
h1 {
font-size: 3rem; /* create small screen size */
}
}
CSS font weight in HTML web page.
In any HTML web page, CSS text font weight can manage the default bold behaviour or font thickness size preview of the text. Where you can apply regular font weight, bold font and custom font weight numeric value in normal font weight preview order. Where you can manually choose font weight selection from minimum font weight 100 smallest font weight to largest 900.
font weight example in CSS in HTML web page.
h1 {
font-weight: 800; /* create Bold font weight */
}
p {
font-weight: 500; /* create regular font weight */
}
So let’s understand a common behaviour of CSS font family, font size and font weight in HTML web page.
Example of CSS text font family, font size, font weight in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title> Font Family Font Size Font Weight Example In Css</title>
<style>
body {
font-family: monotype corsiva;
margin: 4;
padding: 10px;
background-color: yellow;
}
h1 {
font-size: 3rem; /* create heading responsive font text */
font-weight: 400; /* increase font weight in bold order */
color: blue;
}
p {
font-size: 1.8rem; /* set custom font size */
font-weight: 700; /* display custom font weight */
color: red;
}
</style>
</head>
<body>
<h1>You Can See Font Family, Font Weight, And Font Size Example</h1>
<p>This Is The Second Sentence Which Elaborate Css Font Attributes</p>
</body>
</html>
CSS font family, font size and font weight in HTML web page.
By properly applying font family, font size and font weight for better performance and web content preview of any HTML web page, you can improve the default readability and web page visual appearance of your web page and website. Where you can improve the responsive behaviour and web page preview order of your web page by applying these font attributes to any web page.
