Fonts in html

Afaq Javed
A free video tutorial from Afaq Javed
Software Engineer
4.3 instructor rating • 1 course • 10,762 students

Learn more from the full course

Learn Html and CSS with fun for Beginners

Html and CSS from Scratch with a Real World Project

04:30:42 of on-demand video • Updated March 2018

  • The Complete Concepts of html and Css
  • The basic foundation of the web Design
English [Auto] Now welcome students in this VUDU lecture we will be digging a little deeper into the concept of text formatting and we will be studying fonts in extremal and see siestas not firearms are something which you know things the pure beauty of the text. In simple words with good fonts you can you know have a good and a beautiful website present to your users. So in this lecture I will be showing you some that site from which you can download some beautiful fonts in free and after downloading those forms I will be telling you how to use and you link those fonts in a stimulant few documents and by using those forms How can you style a text. So in this redo lecture you will be downloading in voting forms in the. Jim Clancy said and I will be telling you some more. Richard propertys baggage you can style farms in similar cities. So what are you waiting for. Let's get into North. Plus plus and let the fun and open welcoming students in this demonstration. I will be showing you how to you know in board some different forms for your text present in your website and implement those forms within Europe so now have my words. Forms are something which you know really really you know style your website in a very nice way. If you have a style you are formed for the text in a nice way. The website looks very good so far you downloading some free forms you can directly go to google and google for some websites but this is a free Web site right there you can see that through the dark one 0 1 Fahnestock on as you can find your not pretty large you know collection of forms and you can download these forms. According to a news I have downloaded this form right over here which is this bluefish in Angola. And after a downward in this form I will be showing you how do you know import that this forward into the extremal document. So I will not be downloading this for what I do because I already downloaded it and I have placed the phone right away. Here you can see that this is the front page area which is the bluefish. So let me just open it and show you. Now you can see that this is in no fault name with bluefish Demi and the version is one point zero and open Bitly are open diaboli out stand for dog or. Now it is a fine of dog or B.F. which is open. I live on this is the form which looks like something like this you can see what we will do what we will be doing. We will be importing this farm into what I streamlet document and we will be styling or things as well as paragraphs. By using this phone right away. So lets start the proceedings. OK the very first thing I will be doing is you know link this form with our CDs file because for importing the forms in extremal we use the SS. So what I would be doing I would be just coming to my Norbeck plus plus right here. Now you can see that we are having only two elements which is deciding and the second is the paragraph and now the very next thing I will be doing is you know importing the form. Remember one thing that for importing the form. The very first thing they have to do you have to come at the top of the thesis and what we will be going to just write is something like a grade and then form face something like font face and then we have to work backwards. Now this form fails and direct Fontaine's if the inner which will help us to import the form which we have recently downloaded. So what will we be doing. I will inside the form. Thing is we have to define two different properties and that properties will you know define a form which we will be using. The first property and family right this form family is nothing but a desk defines the name of the name of your phone. You can name whatever any book whatever you want. You can name it for one my phone or whatever you like. And remember one thing while using that phone you are important if you have important. You have to use the same phone family name which you have provided. So let me just you know a name or something. My father my Fund let me say that I have you known name I form in a form which I've spoken to my folks. The second thing we have to provide is to find a location where we will have you know foreign fighters or foreign fighters right on to the next stop you know we are we will also be direct about it. So what I will be doing will be just coming in air and I will be using that my source where I at my file. It is something I asked about in the source property. I have to report that you are in and you are live report dismal record and within the small records of the board something the courts and inside a single court room or the location of that files. So I am having the file on the next job which is you know the same location where I can get my website. So I don't have to you know define any location. I will just directly into my file name. So right here you can see that my filing with this bluefish and bluefish is of dog or D. I thought I would be doing something like bluefish and or all of this already. It is nothing just the extension of the file type that worked for a file type you are heading in with sure you if I were to define right here and right click on it like right click on it and then go to properties and now you can see here that in the type of file you can see there it this open python file that is having a door or extension. So I do remember that you have to provide the extension while reference the file into the CFS document. So thats why I use the dog or be a format right over here. So the things are then we have successfully imported the form would be by using these two different properties inside this form. Fields contain the very next thing what I will be doing I will be just you know going into my headings and going into my paragraphs to you know use this form. So the very first thing I would be doing is to define the form family so I will become united over here. Will be seeing one family and saying my phone right away. So what I live here is that I said that I want to use the phone family of this type which I have not provided the name. You can name whatever you like. This is you know only a reference is only a reference name which will be referencing to do that for which you have imported. So I provided my form you can name whatever you like. So the very next thing now lets just you know go where the font size and family of the paragraph the same song family. Who am something. My thought right away is simple and easy. Now just refresh the other side of that comment and then go outside and refresh it and see what happens. So right here as I refresh my website you can see that that text format changed into blue fish font which we had recently downloaded and now you can see that this text looks amazing it will not just give a good glimpse of our website. So that's how we bought our phones into the HDMI NCVS documents. So let's just get back into Norbert plus. And in this demonstration I will be adding some more unknown properties which will help us Stylophone. So let's go wild with some you know beautiful properties which help us to style fonts within the actual document. The first property that I would be using is something like font size. This is just nothing just for you for increasing the size of the form to font size. Now you can provide the value to the font size or you know giving Axel's and also by using hundred percent or percentage. Let me say that I want some size to 50 percent but let me just say it again to show you that were the difference right now. Select just. Now you can see that 50 percent is very much a small right to it. So is the whole thing was very much smaller if the pro worked that 50 percent value it might just come over to the man or lusterless and let me just increase the new 500 percent of 500 or so and then make a logic you know. Is it boom ecologic then gets to control Seybert to move inside and this is FRESH AIR. And now you can see it in these you know the heading is covering a very big space of 500 percent so the one way of providing the value. The font size is something like an edge and the second. If you don't go out in pixels so pixel is something you can provide 50 pixels whole save it. It's really fresh here and now you can see that 50 pixels is this heading if you know I could in the space of 50 pixels right over here and you can all see them on and on you can see 500 pixels to calendar whatever you like. So what I will be doing I'll be just going with 50 pixels just to align the text into the center for it really useful just save it and refresh rate and now you can read the whole thing is in the center and it's looking fantastic. So the next property I will be using is something that I farmed. STEIN So this is like fun style or I go for it. But the former stand is something for providing a bissextile the farm though where we can go way to the farm style is something like normal and normal something which will not make a difference. You know if you can see that roosters. You know in the normal form which we. Which is you know it doesn't make a big difference. So the second way you begin work with the farm style is something like it and it is something you know which makes the text into the telephone. So this is the value which we can provide to the farmstand. We're just going to say read and write. If you go google search and refreshing. And now you can see that everything is in a telephone. The heading is in the galley from there now we are working with the heading. So this is now in the form I will be on. Are you using the form I would just roll with the normal to that third and next property which we will be studying something like forne where you can afford something you know which is used to capitalize or you know to keep the letters in the upper case or a small case. Let me just show you that in four way that we can put this in proper is number one is the normal property and all properties is not in getting things normal. But the second part is the small x smallcaps will be you know just you know dealing with progress and look at the elements that are mature. Do you see that the freshman side and now you can see that you know all the letters are now in smallcaps what is what. You know this has done is that it has you know converted all the letters into the barricades. But stopping the letter of each word. You can see is that you know it's a little bit bigger. So you know just a simple way of styling that text and you can see that by you know using a fork font variant we have a style that we're heading. I totally would dutifully select using these are sometimes to mean something like 80 pixels. Let me just refresh you can see that the Headingly looks fantastic. So you know ex-teammate season very annoying thing if you know the properties and how to use them with you know very very interesting task for us to perform. So that last property will be dealing in the form category the form the way forward is nothing just you know it defines the word of the fanfold I would for. And then I read you know using the unsigned form where it can have the proper Islam or one is normal which will not be using because we don't want to understand the normal category. But the world will understand this board like what a board is something which will you know make the board. Is you know just a simple property as D.M. you know and the previous will actually be seen at the mailbag which you know help us to perform the bolting. But in CSSA you just get a single property right here. And building the single property you can make the complete text book just frontrow say go to the website and refresh it. Now you can see that and it's a little bit more as compared to the previous one but this is you know how far up would be work within the actually masseuses. So let me just come over here and we will not design the paragraph with some beautiful you know. Now we've been having the rough with the CMC said properties. Let's come over here. You can see that is a form of the paragraph here. The font size of that is very much smaller. So what I will be doing is using font size. And let me just see two different pixels all save and just refresh. I think I should go with the low value in something like maybe 2 50 pixels and say. And just to refresh. And now you can see that X is looking a little bit you know good. And the next thing I want to do is to centralize my sunglasses texture a line to maybe something I said. And that's refreshing. And now you will see that X does appear in the center. So this is you know how we style things in know actually a million faces and you can see that everything is looking fantastic. So let me just use the same properties. Let me see. I would use something like that before in the way. So this is something wanted this refresher. Go and do the site and you can see that it is now appearing in bold format. So this is you know how we deal with the fonts how we import our form and how we use them by using some you know different properties. Now there are multiple properties of uniform's you can just Google it. You can go to Google and just google for font properties present in each D.M. and see it and there will be plenty of properties you will be given by Google and you going to use them since they are mining properties. I cannot use the complete property so I have just given you a word of how to use these properties within the power of users and this will be Stallin you are these elements to our right over here. So there's no way anyone on that stage understood that how to Stalberg text you know how to use never and actually hotels as well as some Caesar's properties of restyling text and borking phones. So in the next Rudel lectures we will be dealing with some more new elements present in HDMI MLM CFS. So see you in the next VUDU lecture. That's it for now.