CSS font properties are used to define the font family, boldness, size and style of a text.
In CSS, there are two types of font family names.
On computer screens, sans-serif fonts are considered easier to read than serif fonts.
The font family of a text is set with the font-family property. The font-family property should hold multiple font names as a "fallback" system where alternate font family is used in case the browser doesn't support the first family or the second and so on.
Start with the font you want and end with a generic family to let the browser pick a similar font in the generic family in case no other fonts are supported.
If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". Multiple font family names are specified in a comma-separated list.
p {
font-family: "Times New Roman", Times, serif;
}
If you want to add google fonts to your web pages, you need to add the css link related to the desired font either using @import in CSS or using <link> tag in the web page's <head> tag. Finally, you need to specify the font-family for the desired element in CSS.
<!DOCTYPE html>
<html>
<head>
<title>CSS Fonts</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Srisakdi" rel="stylesheet">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<style>
p{
font-family: 'Srisakdi', cursive !important;
font-size: 1.2em;
font-weight: 100;
}
</style>
</body>
</html>
Visit Google Fonts for reference on google fonts.
The font-style property is used to italicize texts which can have any of the three values.
p{
font-style: italic;
}
The font-size property sets the size of the text which can be an absolute pixel value or relative size. Absolute size forces the texts to appear the same size in all screens while relative sized text changes its size depending on the sreen size where it is loaded.
h1 {
font-size: 40px;
}
h1 {
font-size: 2.5em;
}
// 1em is equal to the default text font size (16px) in a paragraph.
// 2.5em = (2.5 * 16)px = 40px
The text size with em value looks great while zooming in or zooming out page contents in browsers in general but might not work properly in older versions of browsers. You can set the font-size to 100% for <body> element which will solve the issue that might prevail in older browsers.
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
The font-weight property specifies the boldness of a text. It can have values like normal, bold, bolder or any number from 100 to 900 in multiples of 100. The numerical value is not supported by all font families though which will make the text normal between values 100 - 400 and bold between 500 - 900 while the font families that support numerical font-weight values becomes slightly bolder with the increase in value.
p{
font-weight: normal;
}
The font size can be set with a vw unit which means a value in relation to the viewport width which will make the text size follow the size of the screen.
p{
font-size:10vw;
}
Viewport is the browser window size and 1vw = 1% of viewport width. So, if the viewport width is 50cm, 1vw is 0.5cm.
The font-variant property defines if a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters where such converted uppercase letters appear in smaller font size than the original uppercase letters in the text. The values can be either normal or small-caps.
p{
font-variant: small-caps;
}
Icons are small vector shapes that can be used instead of images in a web page. Icons are easily customizable using CSS (size, color, shadow, etc) while adding icons instead of images helps to make web page load faster. Icons also make web pages visually pleasing.
You can find a number of online applications that can help you convert vectors shapes into icons while you will also find a number of icons libraries online like icomoon, fontawesome icons or bootstrap icons or google icons to name a few which is the easiest way to add icons to a web page.
Here's an example on how to add font-awesome icons in a web page.
<!DOCTYPE html> <html> <head> <title>CSS Icons</title> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> </head> <body> <i class="fa fa-user"></i> <span class="fa fa-bars"></span> <i class="fa fa-spinner"></i> <span class="fa fa-download"></span> </body> </html>
Visit any of the links above for detailed lists of web font icons.
Leave a comment