Fonts in CSS

Hello guys. Welcome to our CSS series. In our last segment, we talked about CSS masking technique, in which we had seen how we can with the help of image or with the help of gradient we can mask the image. I hope, from the last segment, you have practised all the practical and performed them on your own.  We will move ahead with our today's segment about CSS fonts. How we can use different types of fonts and along with that how we can add font related properties and attributes. We will start with our today's segment; in today's segment we will first see what CSS fonts. CSS font property is used to control the look of texts. By the use of CSS font property, you can change the text, size, colour, style and more. This line in PPT indicates whichever font we have added, what is font’s size, how is font’s look, making it bold, italic etc. The tasks that are related to look and feel, we can do those through CSS font attributes. Now here, there are few points given like CSS font colour, family, size, style, variant and weight. We will see about these six things in today's segment. How we can control these three things and modify our fonts according to the requirements of our webpage. The 1^st property is of our CSS Font colour. Like we had seen in our last-to-last segment about colour, we use three types of colours, RGB, hexadecimal and with the colour names. In our next segment of CSS colour names. We are going to see about all these colours in detail in our next segment of CSS colours. In that we are going to see about all these colours in detail, how they are generated, what is the value of the code and how we mix up in it. But currently when we are seeing about the font colour, in this we will only keep in mind that we can provide the colours in three ways with the colour name, with the hexadecimal value and it’s RGB value. So, when we want to change the colour of the font at that time, we make use of colour property. We don’t use font colour, it’s only colour. You have to remember here, that when we had to add background, then background, then hyphen, then colour this property we had added but in font colour it is not the case. In font colour we use the simple colour attributes. So, this is a thing that we will see through practical, so let's open our Sublime Text. In Sublime Text, we will set our program on HTML and we will write here example fonts. In example font, we will set the program at font.html. Now in the body tag let’s say we add a few heading tags. Let's see. This is an example of heading, Save. Now we will run this program. So here we are getting a heading tag example. Now we want to change its colour. So simple we can do inline as well as internal but mostly we will use internal style sheet here. So, here let's say I take an element h1, and here to change the colour of h1, I will add colour. Let’s say I take the colour red. Save, reload. So here my font colour is changed to red. Any font’s default colour is always black. So currently we have changed to black and made it red. So, here we are getting the font colour red. Now, let's say, like it was said in the slide, that we can change the colour in three ways. First is the colour name, second is hexadecimal value and third is RGB. Here we have used the colour red. Now we will change with its hexadecimal value. Let's say, if we take one more heading tag, let's say h2. (Pause) This is an example of heading 2, size, save. And now here in h2, we will give the colour like we have taken in the slide after #. 9000A1, before that will come #. Whenever we are passing hexadecimal values for colour, in that case # is very important. So, we will add this, save and reload. So while reloading we are seeing the text in purple colour so this code 9000A1 stands for purple colour. Now let's say we will add one more h3 tag, (Pause) this is an example of heading 3 size, h3. Like it is mentioned here. We are going to now add it in RGB. So, let’s say after RGB, we will add 0, 220, 98 values. Colour, rgb, 0, 220, 98. This is our example, reload. So currently we are getting it in green colour, this is a light green colour, parrot green. So, in parrot green we are getting the 3rd heading tag. So here in total, in words, means where we occupy the name, we have given colour to h1 tag. Then we have added another tag in hexadecimal value and third is in our RGB value. How we generate RGB value, we will learn it when we will cover the CSS colour segment. So, this was how we can give colour to the font. How we can change CSS font colour. Next is about the font family. Font family means which design font we are using. This is indicated by our CSS font family. So, as you can see here, it is of generic family, it includes seif, sans serif and monospace. Which is given to us inbuilt. Those are generic.  If we do not pass any font type in that case the font family that is available to us is generic. Then comes the font family, it specifies the font family name like Arial, New Times, New Roman, etc means, these are such types of the font family which we pass manually. So, the ones that are there without passing, they are available by default. That is our serif, sans serif. And the ones we change and add new, those we call as font family like Arial, Times new Roman. Now, here they have given what is the difference between serif and sans serif. Like it is shown in the image when we use sans serif, it is a straight alphabet. The pointed lines of the end point of the character. Those are not elongated. But in serifs you can say that where the lines end, small lines are added. Like here in the F, at the end. Then below there are small points that have been made. So, this is our Serif and Sans-Serif difference. Sans- Serif gives us character, without extended end points. Serif gives us extended endpoints. So, these are the two differences. In Serif types there are Serif, Times new roman and Georgia like font family. In which the endpoints are not lengthened but in sans serif endpoints are lengthened, it's examples are Arial and Verdana. So even this we will see with an example. So let's say we have added here h1, h2 and h3. We will change its font family. Like in h1 font family we have taken Sans Serif, we'll save it, reload. As soon as I reloaded. Our font starts to look different, currently our h2 tag is still in Serif. We have used Sans Serif here. In H1 Sans Serif. As soon as I used Sans Serif, the h points that are here, which are still available in its h2 tag, are removed and we are getting straight lines. You yourself can see its difference of h1 in Sans Serif and this in Serif. Here to h2 We give serif, default also is serif itself. We will provide the property with CSS. Reload. So, after reloading the difference is not coming because our h2 tags default property itself is Serif. The next slide is font family monospace. So, we will give h3 font family monospace. Okay. We will reload. As soon as we reload, h3 is looking a little different. Design is similar to h1, but these are a little small. In monospace looking at T and H you can identify, line of h is going a little above h.  So, this is mono space, in monospace the capital letters which are there compared to the letters with the height like h, b, d, they are smaller to those. So, this is our monospace style. So, here we saw the font family, how we can use different font families as well. Now we will try to see if we can add arial or not. Let's say I will take one more h1 tag. H1, this is an example of Arial fonts, save, we will give it class or we will add it here itself. Style, font family, arial. (Okay) So, here we are not getting default, which means we will not be able to add default here. So, here you can see the h1 style that was there of Sans Serif. That itself is added here. So, how can we add an Arial font in our system? So, for that we can make use of Google fonts. For that we will go into a new tab. Google fonts. Here when we search for Google fonts. So, we get different types of fonts available there. This one is called Roboto. So, this is our Roboto text design. Then it is written here New Tegomin. So, this is New Tegomin design. Poppins, when we have to add the font in Hindi. In Google fonts, whichever is your requirement or whichever font you like, you can add those font styles in your web page. For example, we will take a different font style. Like we will take this Oswald. We will click on Oswald. This is our Oswald style and there the pixels are given which we can use. Now, here in font style extra light. Which means light font. Then a little darker than that. Then dark, more than that. In this way the styles have been given. If we want to add these font families in our system then we will download family from here. As soon as we download, we get Oswald's zip file generated here. This is our Oswald's file. We will extract it. After extracting, we can get this folder generated. So, this is our Oswald's font file folder. So, this entire folder of Oswald. From that static that is mentioned there, in which we are getting all fonts available. We can take those and we can use this folder as well by keeping it in the web page. The second way which is easier to do this is using the url.(Pause)  We will search here where the url is available. So, to add Google fonts, 1^st of all, let's say we had selected Oswald. This is our Oswald design. For Oswald, if we have to add this in our webpage, what will we do? Scroll down, you can see here that there are few things available, open sans with Oswald, Roboto, Lato, Montserrat, Raleway, like this there are different fonts that are available. So, if we want to add only our Oswald. So, we will have to click here. After clicking we are getting a link generated here. We will copy this link and the program that we have, in that below or above the title, we will add in the link portion. So, total there are 2 links that are being generated, 1^st is the preconnect link of Google fonts gstatic.com. 2^nd is our googleapis.com in which open sans display swap is written. This is our font family. We will save it. Let's say now we are getting our program in sans serif and others. Then our 3^rd, last, that new h1 that we have added. We had mentioned Arial, in that we will add Oswald. So, we have added the link now. So, we will add Oswald here, save and reload. As soon as I reloaded it, I got the font style of Oswald I am getting. As you can see here, these are my style. Now let’s say if I want to add something else. So, we will take a different style, other than Oswald. Let’s say this is our style, Syne Mono. So, let's say if I want to add this in my webpage. So, this url has already come to us, so we will take this url. Even though we will add in the link, this one is called Syne Mono. Already here a same url is generated. Okay. Again, this is an example of Oswald font. Syne Mono. We will also have to see it’s writing style, how we add it. Syne Mono, is it’s style. We will check whether it is running or not. Okay, this is running. But, you can see here that Syne Mono, this style of ours. We are not getting this kind of style, instead we are getting some other style. You can see that this one, which is this style? It is the same as the Serif style. So, this is an example, when our font is not properly loaded. In that case the default font style that we have. Like in our case it is serif. So, our default, sans serif or serif style will show in the place of font. So, if they are getting properly loaded, we can see that font, if they are not properly loaded then the other one, which is the sans serif, that we will see. So, in this way, all the styles that are available with us, for example Google fonts, whichever style you want, you can add in your webpage. Now, we will go ahead in our slide. Font family we have covered. Now comes font size, In which different style can we add font size? So, currently we have font size which means our height is that of the font that is there. So, here there are few default sizes that are available. Font size, xx-small, x-small, small, etc. We are going to see all these sizes. This example of font family and font colour. So, here below or we will take a new program. Here we will give the example, font, colour, family, save. We will generate a new program over here in which we will only see the font sizes, html example font size, save. Font size.html. We have to check all available sizes. In our program we will take, let's say a p tag. In p how many slides have been given, all the contents that are available, we will keep on adding. First is our p in which we have used xx- small. This is an example of xx-small font size. Okay.  So, here we will take inline, CSS style, font size, xx-small. We will save this and we will run our program. Okay. So, we will zoom in and see. So, currently even when we have zoomed into it, still we are seeing it in small size. Because it is an extra, extra, small size of the font size. Now, in the same way we will add others as well. Let's add CSS. Let's say in the body, text align, centre and background colour, let's take it light green, save. Okay, so we are getting fonts here. Now, we will add all the fonts here one by one. Now, let's say our next font is x-small. We will remove one x from here, save. So, we are getting a bigger size font than this. In our next style only small is there. So, these are our small size fonts. Currently we have zoomed into our browser window, so that we can even see extra, extra small. Then this is our small size, then after the small size comes medium. Save. This is our medium font size. Then after medium comes large, save. This is our large font size. Then after large comes our extra-large, extra-large font size. Then comes xx-large. Then comes our smaller size. Even this is one size smaller. Okay. So, this is our smaller size font. Then comes our larger size font. These are our larger size fonts. We can use the font size by using different keywords. Now comes very important, when we have to give the font size in percentage. Let’s say I give the font size as 100%. So, we will get the font size in this way. This is an example of 100% font size. If I make this 50, we get half the size of the font. So, we can give the value to the fonts on the basis of percentage as well. Then comes our font, if we are not giving it in percentage but in px. Mostly we prefer giving px value. Font size let’s say 20 pixels and reload. So, this is my 20 pixels font size. We can give font sizes in different ways. We can give it through keywords which is my attribute value, XX-small, small, medium, large, X-large, etc. We can give it in percentage and font size in pixels. This was our font size, how we can give different font sizes. We will go ahead with the next font size. The font size that we saw currently, apart from this absolute, relative, responsive and length property. We have 4 more types of font size available with us. Absolute means, here it is mentioned in the definition itself, it is used to set the text to a definite size, it is not possible to change the size of the text in all browsers. Means whichever is our browser, means in all the browsers we will use the same size font. It so happens that when we work with different browsers or we open one website in different browsers, then our same font is seen in different sizes. In that case it will not be seen in different sizes. Means our font size should be the same in every browser, in that case we use absolute size. In that we give the font size in em. Em is a measurement for font. If we are giving values in em, in that case, sizes in all the browsers will remain the same. If we have to see in em, we will add one more here. This is an example for em, so let's say, if I pass the value 10em. I reload it, these fonts that we can see, these very big, these are in em. Em is a rarely used font size. Let's say in the same program instead of 10em  we make it 1em. So, we will see fonts in this way. This is an example of 1em font size. Like you saw that, em provides us with a big font size. So, that is the reason em is rarely used as there are big size fonts available in it. Next after absolute is relative-size. Relative-size is such a size which changes with the browser. When we use different browsers, on the basis of browsers our font size keeps on changing. Since relative and absolute are dependent on browsers. We have such font size available with us, which can be properly used, responsive font size, responsive font size is such a font size in which when we make the browser window small, large or resize it. So, the browser window on font size also changes. That is the reason it is represented with vw. Vw stands for viewport width. Viewport means the portion that we can view. We set it’s width inside. Let's say in the same example if we want to give value in view port width. So, this is our 1vw, save. Okay. Here what we are getting in the smallest font size is our 1vw. Let’s say we make it 10. So, we are getting it in big size. Let’s go one thing, we will resize this window. You can see that when we resize it, the upper font’s size remains the same but these fonts that are represented with vw those get resized means when we make the window big, they get bigger, based on the resize portion, they set themselves. This is the reason vw is used more because the fonts are based on our viewport size, it adjusts based on its size, so vw is mostly used because of this nature. This is called responsive font size means based on the widow size, it changes itself. Last one is font size with length property means length, which is our measurable units like cm, centimetre, px that is pixels, pt that is point. We can give our font size in this as well. Px, we have already seen that we can give the value in px as well. If we give the value in centimetre. Let’s say I give 5 centimetres. So, like we have measure in scale. This is a font available in 5 centimetres width. If we see it from below it is 5 centimetres in size. It is very big. I will make it 1 centimetre and reload it. So, this is the size in centimetres. You have seen that when we give size in centimetres, the font looks very big. So, units like centimetres are rarely used. We use pixels when we define webpages. But units like centimetres are rarely used. If there is any which is mostly used, that is pixels and vw, viewport. These both change based on our window size. So, these are the font size properties. Next is our font style, how we can make different font sizes available to our fonts. In font size there are normally, italic, oblique and normal display properties. So, let's say our program that was there font html. In that we had taken h1, h2 and h3. In that we will add italic, oblique and normal. Let's say for h1, we will add font style, italic. Okay. As soon as we gave italic to h1, so wherever we had used h1, all those spaces were getting italic. Next is our oblique, so to the h2, we will add font style oblique. Now we will check. So, this is our h2 style, in which h2, font style oblique, means, we are getting tilted font. Then is our normal font style, in h3, we will add font style normal, we will reload. The horizontal or vertical font that we get, this is a normal font. This is our italic, this is oblique and this is normal. In this way, the different style, if we have to make it bold, underline, even that we can do. So, all this we can do with the help of font size property. Then comes our font variant. What happens in the font variant, like it is mentioned here. CSS font variant property specifies how to set the font variant of an element. Means we have to show it normal or in caps, that we can see here. Let's say to the h1, font variant and there is property with us, small caps. If we add it. Here all the characters, except the 1^st character that we had given capital, is seen big to us. Rest of the fonts also can be seen in the capital. Means, except the 1^st characters, the rest of the characters are also seen in small capitals. Then comes font variant normal, so lets say to h2, if we give font variant normal. So, we are not getting any special change here. We are getting the font as it is. Means if I apply any property to it, it will give us normal itself because of the CSS change. So, this was our font variant. Then comes our font weight. Normally if we want to make any element bold or dark, in that case we make use of bold or strong tag, the html tags are available but let's say we don’t have to make use of tags but we have to show it in a different way. For that, 3 values are available: bold, bolder and lighter. And this same thing we can do by giving the numbers in this way. Let's say that we will generate one more program for font weight. Html, example, font weight, font weight is our program. This is our program. And now we will add different font weights and font width. So, let's say, here like it is shown, we will add a few p tags. This text is with bold font weight. Save. Okay, so we have to make a bold font weight. So, what we will do here is, we will add style, font weight, in which we will add bold. As soon as I add bold, we are getting a dark bold font. Now, let's say we will do the same thing differently. Let's say in the place of bold we will make bolder. Now, we will reload it. In the case of bold and bolder, we are getting almost the same output. Next we will add, here will come bolder. Now, in this place if we add lighter. In place of bold, if we are getting light, we are getting light style fonts. Now, in this place of bold we will take 100, weight. So, this is our 100. Then comes our…lets say in this we will add 200. So, in 200 we are getting the same thing. We are getting it the same because our current style is sans serif, where 100 and 200 bold values are defined in this way. If I change it and make it 600, I will see my fonts are a little bold, means, 100, 200. Now, if we represent all the numbers, in place of 200, 300, 400, 500, 600 we have already shown. Now, here 700, 800, 900, we have shown them all. So, you can see that from 100 to 500, our font weight looks almost the same. But when we see it after 600, our fonts look bold. So, these are different font weights, in sans serif style we are getting these font weights available. When we go in some other font style. In that case 100 looks very light, it looks thin. Then 300 looks a little normal. 600 looks bold and 800, 900 looks extra bold to us. But that depends on what font family we are using. Which font family we use, we get that in that case. Let’s say this same thing. The font that is available with us, if we take any font from there and do it. Save and body, style, font, in body, font style. Okay. It should be family, save. So, here we have reloaded. When we changed the font family Oswald, at that time we can see that in Oswald, the font weight theme is not available in it. Thinnest is the 100, so that will look this way to us and after that when we go to 600, so this looks this way to us. So, this is the example, when we use different fonts, so every font has its own property, no matter how light or dark they are available. In that case it varies, which font you use. It’s boldness or the font weight that is there, 100, 200, 300, that varies which font you use. So, this was our font weight property. Last property is of font stretch. In font stretch, our fonts that are there, the values that are given here, normal, semi-condensed, extra etc. In that way our fonts stretch. Like it is written over here, the font stretch property in CSS allows us to select a normal, expanded, condensed face from the font’s family. This property sets the text wider or narrower compared to the default width of the font. Based on the width, we either shrink it, make it narrow or we make it wide. In both these cases the fonts are available. To see the stretch we will perform the example. Let's say we will see one more html program. Example, font stretch, save. Okay. Here let's say we will go in our sublime text and take the p tag. This font is normal. In that case our style will be, style, font, stretch, now we will run this program. So, this is our normal font. Here in the body we will add a little bit of colour. Style, body, background colour light green and text align centre. Okay. So, this is our normal font. Now we will add different variants in it. After that there is semi, condensed, save. So, this is our semi-condescend form. Then comes our condensed. Then comes, extra condensed. We are almost getting the same font in all. Then comes our ultra-condensed, then is semi extended, then is our expanded, then is extra expanded and last is ultra-expanded. So, when we have added all the properties. We are getting all the fonts, in the same way. We will do one thing; we will change the font family in it. We will select such a font family, in which stretching is available. Let’s say we will take sans serif and I reload it. Okay, reloading we are finding a change here. Like ours, this font is different from other fonts. This is our font style, normal. This is normal. Then comes our semi-condensed. So, here it will come semi- condensed and this is condensed. Then this is extra condensed. Then this is ultra-condensed, semi expanded. This is our expanded. This is our extra expanded and this is our ultra-expanded. We will save it and run it. These font styles that are available to us. All these are semi- condensed, condensed, extra- condensed, ultra-condensed, meaning we are seeing the fonts in shrinked form, we are seeing them narrow. But the rest of the fonts we are seeing in expanded portions. So, this is the stretching available in which way we can stretch the font. With the help of CSS we can stretch the fonts. So, these are the properties that we use when we design the webpage. So, based on the requirement, it is used. We see how the requirement is and on that basis we use it. We decide based on whether we have to use the stretching or some other property. So, in total, in our today’s session we started from font colour, family, size, style, variant, weight and stretch like font property. So, guys, in today’s session, if there is any topic that you have not understood or you have a doubt about it. You can tell us on forums.learnvern.com. We will try to revert to all your questions with the solutions as soon as possible. In our next session we will learn about CSS icons. Thank you.