CSS Font Family and CSS Font Size.
CSS Fonts (CSS Font Family, CSS Font Size)
In this tutorial we will be learn to decorate the text using the font property of CSS, under the font property we use to decorate the text such properties are; font-style, font-color, font-family, font-weight, font-variant etc. And we will also see the programming examples of this properties with output.
CSS Font Family
Here we learn two types of font family names in CSS, and also see the programming examples with outputs.
This Font Family are given as;
- <family-name>: We use this property to applies a specific font family name such as ex; Cursive, Arial, Times new Roman etc.
- <generic-name>: Here a group of the font families which is similar looks in its own group, such as example;
Now we see the table of some <font-family> name and example text, how looks text in different font-family.
Table of Font Family with Text Example;
| Font-family (family-name) |
Text Example |
| ‘Courier New’, Courier, monospace |
 |
| Verdana, Geneva, Tahoma, sans-serif |
 |
| Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif |
 |
| ‘Lucida Grande’, ‘Lucida Sans Unicode’, Geneva, Verdana, |
 |
| “Comic Sans MS”, cursive, sans-serifs |
 |
| “Arial Black” |  |
| ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif |  |
Now we see the table of some <generic-name> with text example, how looks like in different font in generic name.
Table of Generic Name with Text Example;
|
Generic-name |
Text Example |
| serif |  |
| sans-serif |  |
| fantasy |  |
| cursive |  |
| monospace |  |
Guys, you see the above different font style in font-family <family-name> and the <generic-name>, you can use this font in own project to looks text attractive and fantastic.
Important Points;
- Each font family name or generic names should be separated by a comma “,”.
- The font-family in CSS property specifies a list of priorities font families.
- Having multiple font family names specified lets the browser select an acceptable fallback font when it necessary.
- The browser will auto pick the font style to use from the specified list starting from first to last specified.
- If the browser does not support the first font, then it will try the second font on the written font style.
Now here you see the programming examples of font family and generic name with output.
Programming Example of CSS Font Family;
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>Document</title> Â <style type="text/css"> Â Â Â body{ Â text-align: center; Â line-height: 4px;} Â #p-1{font-family: monospace; Â color: blue;} Â #p-2{font-family: fantasy; Â color: red;} Â #p-3{font-family: cursive; Â color: rgb(39, 119, 2);} Â #p-4{font-family: 'Courier New', Courier, monospace; Â color: darkorange;} Â #p-5{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color: fuchsia; Â } Â </style> </head> <body> <h2>Learn Coding</h2> <p id="p-1">Learn coding with StudyMuch.</p> <p id="p-2">Learn coding with StudyMuch.</p> <p id="p-3">Learn coding with StudyMuch.</p> <p id="p-4">Learn coding with StudyMuch.</p> <p id="p-5">Learn coding with StudyMuch.</p> </body> </html> |
Output of above programming examples;
 |
Above you can see the different-different font style using font-family with colored so it looking attractive and fantastic.
CSS Font Size
In CSS the font-size property used to sets the size of a font increase and decrease. For using this property, we need to use the valid value.
Valid Value to use CSS Font Size;
- xx-small, x-small, medium, small, large, x-large, xx-large: absolute-size keywords.
- <length>: Using this value to put length value to set the font size, such as px, em, pt etc.
- <percentage>: Through this value we set the font size with percent, such as; 10%, 50% etc.
- Smaller, larger, relative-size keywords the font would either be smaller or larger than its present element.
Now we see the programming example of this property with using of valid value and output of programming.
Programming Example of CSS Font Size;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>Document</title> Â <style type="text/css"> Â Â Â body{ Â text-align: center; Â line-height: 4px;} Â #p-1{font-size: small; Â color: blue;} Â #p-2{font-size: x-small; Â color: red;} Â #p-3{font-size: 200%; Â color: rgb(39, 119, 2);} Â #p-4{font-size: large; Â color: darkorange;} Â #p-5{font-size: xx-large; Â color: blueviolet;} Â #p-6{font-size: medium; Â color: darkred;} Â #p-7{font-size: 50px; Â color: darkblue;} Â </style> </head> <body> <h2>Learn Coding</h2> <p id="p-1">Learn coding with StudyMuch.</p> <p id="p-2">Learn coding with StudyMuch.</p> <p id="p-3">Learn coding with StudyMuch.</p> <p id="p-4">Learn coding with StudyMuch.</p> <p id="p-5">Learn coding with StudyMuch.</p> <p id="p-6">Learn coding with StudyMuch.</p> <p id="p-7">Learn coding with StudyMuch.</p> </body> </html> |
Output of above programming example;
 |
Above you can see the output of programming, the size of text is different-different we used here CSS font size property with different value, you can see the above programming.
Guys in this tutorial we learned the CSS Font Family <font-family> and CSS Font Size <font-size> under the CSS fonts, I hope you all read this and learn new something from this tutorial.
In next Tutorial we will learn the (CSS Font Style, CSS Font Weight and CSS Font Variant).
If you have any Queries, ask in the comment section, we will try to replay your questions,
Read Also-
- Learn HTML Form Input Type with Examples.
- Learn All CSS Tutorial with Examples.
- Learn HTML Table full Tutorial with Examples.
- Learn how to insert YouTube video in HTML.
- Learn All Tutorial of HTML with Examples.
- Learn about Mobile & Disease caused by Mobile.
- Learn what is Internet & Is Internet really Free, but how?
6 Comments
Ima · April 1, 2022 at 9:41 pm
Spot on with this write-up, I truly think this web site needs a great deal
more attention. I’ll probably be back again to read more, thanks for the advice!
SEO lists · May 13, 2022 at 10:16 pm
With havin so much content and articles do you ever run into
any issues of plagorism or copyright infringement? My
site has a lot of exclusive content I’ve either created myself
or outsourced but it looks like a lot of it is popping it up all over
the web without my agreement. Do you know any ways to help reduce content from being ripped
off? I’d truly appreciate it.
Chanda · June 4, 2022 at 9:53 pm
Heya i’m for the first time here. I came across this board and I find It truly useful & it helped me out much.
I hope to give something back and help others like you aided
me.
zoritoler imol · July 1, 2022 at 12:49 pm
Lovely just what I was looking for.Thanks to the author for taking his clock time on this one.
Merlin Rousch · September 23, 2022 at 3:11 pm
I like the efforts you have put in this, appreciate it for all the great content.
gate io nedir · May 20, 2023 at 5:35 pm
I am a website designer. Recently, I am designing a website template about gate.io. The boss’s requirements are very strange, which makes me very difficult. I have consulted many websites, and later I discovered your blog, which is the style I hope to need. thank you very much. Would you allow me to use your blog style as a reference? thank you!