10: How to Import New Fonts | Basics of CSS | Learn HTML and CSS | HTML Tutorial

today we're gonna learn how to import new fonts into a website and this starts together at the previous episode where we learned how to style text using CSS so as you guys can see in front of me here we have a very basic paragraph that has a class set to paragraph inside my style sealer when heading style did by giving it the font size and a line height so if you take a look at the text inside the browser this is how it looks like so in the last episode we learned how to add a new font to the text and we did that by going into our code and included font - family - some of the styling and we could for example give it Arial which is a font that we have installed inside all browsers meaning that we can use this fonts without having to import it inside our website so if we go back inside the website refresh you guys can see we have a new font now in most cases we want to give our website a bit more personality we wanted to stand out just a bit more by giving it some kind of unique fonts and when it comes to importing new fonts we have two methods we can use the first one is that we could download a font somewhere online and then include the font file inside our root folder and then link to the file using our stylesheet now doing it this way means that you can see the fun inside the website without having internet connection so if you're sitting on a train or somewhere we don't have internet you can still use the font inside your web site now the bad thing about doing it this way is that it takes slightly longer for the website to load the font I mean it's not really going to be noticeable but it will technically take just slightly longer to load the font but like I said it's not really something that you can see now the second method we can use is that we can actually link to a font somewhere online in inside an online library where we have a bunch of fonts available to us and doing it this way it's not going to allow for you to see the font if you do not have internet connections in two or linking to a font online somewhere but it is faster to load inside the website and it's also faster for us as developers to just include a font by adding a link so what I'm gonna go and do today is I'm gonna go into a gasps both ways we can import the font inside the website but I'm gonna go and start with the second method because it is the faster way to do it so in case you guys don't want to wait for the faster method at the end I'm gonna go and start with that one now I should also mention that when I usually use fonts at a website I usually just include a link so the first thing I'm going to show you guys is that I do actually have a link for a website that shows all the different fonts that you don't have to actually import inside your website or in order for you to use them so just in case you're interested I will leave a link in the description so you can see a list of these fonts now in order to import a fonts I'm gonna go to use google fonts which is a website by Google that has a library full of fonts that you can use for free inside your website or you can just download the fonts and use them on your computer if you wish to but the main point here is that we're going to go and use this website for importing fonts into the website so as you guys can see inside google fonts we do have a surge fill in the right corner where if I want to search for a font let's say I want to get that so I can search for it and then you can see we have that so we're in the left side and I'm just gonna go ahead and delete the search term here and I'm just gonna go and choose a font that I would like to use for example here so we're to scroll down I'm gonna go and use the one called modak because it looks kind of special what I can do if I want to use this font is I can click the plus icon then at the bottom here can then see the font that I just selected and inside of here we have a link that I can just include inside my code so I can go ahead and just copy the link go inside my text editor go inside my index page and I'm gonna go and paste it on top of my style sheet and it's very important that you paste it in on top of the style sheet and not below it because you need to load the font before it can use it inside the style sheet and because the dark more inside off get read from top to bottom we need to have two font link at the top so I'm gonna go and paste it in save it and now I'm gonna go inside my style sheet I'm gonna go back inside the website and then I'm gonna go and copy the second piece of code down here below which is the font family that we need to use no to actually access to font so I'm gonna copy in go inside my style sheet and replace our existing font family with the new one so if we go inside my website refresh you guys can see we now have a new font now one more thing I want to show you regarding this is that we can in fact if we were to go back inside google fonts and choose a different font that has wasn't just one font weight available to them so forward to choose the font down here called Playfair display you guys can see that more ways available to us inside this font we bold we have black and we have italic fonts so if I were to select this one instead by clicking the plus icon go down to the bottom here and see the selected fonts I'm gonna go and deselect the previous one called motek because you don't need to have it anymore and then before we cover the link code down here I'm gonna go to go inside customize an inside customize you can see we can actually select the different weights we want to have inside the website so I could say we have regular 400 which is the default one I can select both 700 bold 700 italic if I want it and then I can go back inside embed and you'll actually notice that the link actually changed so I can then copy it paste it inside my index page underneath the first one we chose because now we have two different fonts inside the website but still on top of the style sheet of course and then I can go inside my stylesheet then if I go down here select a new font family copy and paste it in we now have this new fund available to us over to refresh the browser you guys can see we have the new font so if we want to choose a different font weight I can go down at the bottom here and add a font - wait and because we imported let's see the one called four hundred seven hundred and seven hundred I I can use these fonts inside my stylesheet so if we were to go back in here we can say seven hundred as a weight refresh the browser and you guys can see we have a heavier weight now if we want to make the font it's how like I do need to go down below and say font and - style and say italic then if I go back inside the website you guys can see that it is now italic so this is the first way we can import a font inside our website now the second myth that requires to actually download a font so if we were to go back inside my code and just redo what I did here to make sure we don't have all this code delete the two links like so refresh the website so we have a clean website I can now go back inside google fonts and then say well let's actually go and choose a more unique font like the one we have up here called nasi fur if I select this one go down at the bottom here and then deselect the Playfair display with sweet chills before I can now click download okay in the top right corner instead of copying the link so I'm gonna choose download and you guys will notice that I just downloaded the font so if we're going sup my downloads folder you guys can see they have a sip file I'm gonna go and right click and extract it and then I'm gonna go and copy the fonts now inside my root folder I could just paste it inside just the main directory here but because I want to organize my root folders just slightly I'm gonna create a new folder call it fonts and insert the font inside this folder here now I'm gonna go and copy the name of the font because we will need to use it in just a second now I'm going to go back inside my code so when it comes to this method here we don't need to do anything inside the index file so if we go back inside my stylesheet go to the top of the stylesheet we need to actually link to the font and we do that using something called ants font - face curly brackets and then inside the curly brackets need to include two things first of all we're going to include the link to the actual font inside our root folder and the second thing we need to include is the name they want to refer to when we want to refer to this font so first of all it's go ahead and link to the font by writing source URL parentheses semi-colon and inside the parentheses I'm gonna go and include the link so I'm gonna say we have a folder called fonts forward slash by saying we go inside the folder and then I'm gonna go and paste in the name of my fonts then below here I need to include the name that I want to refer to when I want to select this font so I'm gonna say we have a font - family and I'm gonna go and set this one to nasi fur or if you want to be to say nas for short semicolon and then I'm gonna go down inside my paragraph down here I'm gonna go and write font - family I'm gonna say nas semicolon I'm gonna go inside my website and now you guys can see we imported the font and used it inside our paragraph here so these are the two methods we can use in order to import a font inside our website and before we end off this episode there's one more thing I want to show you guys because there is actually a second website you can go to if you want to download fonts for free and again there's a lot of websites you can go to but this is the one that I usually use as you guys can see is actually on the maintenance right now as I'm making this video but if you go to the website when you're watching this video it should hopefully not be on the maintenance anymore but again this is a great place to get fonts and you can what you can do in here if you want to because all the fonts are free is that you can donate to the people who made the fonts so I hope you guys enjoyed I'll see you guys next time

Channel: Dani Krossing

Views: 384,071

Keywords: html access more fonts, import new fonts in css, how to import new fonts using html, import new fonts using html, how to import new fonts in html, import new fonts in html, html import fonts, html how to use additional fonts, how to use more fonts in html, html how to use more fonts, import more fonts into website, how to import new fonts into website, import new fonts into website, how to use more fonts, html, html tutorial, how to import new fonts, css, fonts, css tutorial

Id: Hwq_Mr12bcI

Length: 9min 30sec (570 seconds)

Published: Sun Oct 22 2017