13 | HOW TO IMPORT NEW FONTS USING HTML | 2023 | Learn HTML and CSS Full Course for Beginners

[@radicalstihl1266]

I just spent 4 hours watching videos to do this and you helped me do it in 4 minutes 😂❤ I just subscribed thank you 🎉

[@seamusmcgowan-s7b]

between 11-13, so much useful content. Enjoy that you give multiple options, since some companies have restrictions (web design)

[@OwenSchmidt-i6m]

OMG Thank you soooooo much for this! I was spending at least 2 hours trying to figure this out.

[@arshad1781]

Thanks for sharing free knowledge

[@heerasagar8327]

Thankyou so much sir ❤❤❤🎉

[@chomankiller3211]

go straight to the point

[@christian-schubert]

Hey Dani, This could get you into trouble (at least in the EU). Google fonts CDN links are not GDPR-compliant, so once you implement them, you are required to ask for your users' consent first (i.e. cookie banner). Hosting the fonts yourself should circumvent that problem. Since I haven't watched all videos in this playlist yet, I don't know whether you've already addressed this issue elsewhere. If that is not the case, you should DEFINITELY consider making a video on this topic, would certainly make this playlist stand out from rest 😎

[@Dani_Krossing]

Oh it seems you are correct, they did recently make it GDPR compliant in Germany. Didn’t realise that. 😅 Will make a video addressing it, and place it right after the font lesson in the playlist. 🙂 More countries are most likely to follow suit in the future. Thanks for making me aware. 🙂👍

[@Big_Dot_Inc]

Hello Christian, can you explain to me in more easy way . Thanks!

[@christian-schubert]

@@Big_Dot_Inc Externally hosted Google Fonts without clunky Cookie Banner bad

[@Big_Dot_Inc]

@@christian-schubert So if I download the fonts inside webpage fonts folder I am good to go ?

[@hamidoahmed9985]

you are the best, your video solved my problem

[@KoPl-jf9fe]

Great tutorial works perfectly:)

[@AlimldaAli]

Tank you sharing knowledge

[@yahya-kb2cn]

THANK YOU SOOOOOOOOOOOOOOOOOOOO MUCH

[@notpaps]

Nice one... really nice and torough video

[@Usaid-u5u]

Thank you ,Really Help Full For me

[@iankim2241]

I thought you change your channel to a game vlog. Because I see sometime you uploaded some game vlog. Nice to see again your tutorial big help since I saw your channel before.

[@Dani_Krossing]

My channel has always been a "multimedia channel" 🙂 So it has all sorts of tutorials related to any digital media.

[@CristianIntriago_]

Thankss!! i was lacking the .. lol

[@jowens3548]

OMG, THANK YOU, THANK YOU, THANK YOU for this tutorial and this entire playlist! Iwas SO FRUSTRATED teying to understand how to use and apply Google Fonts yesterday! 😩 Stumbling across your videos restored my sanity!!! 😂 @Dani Krossing can you clarify one thing for me?! As a total newbie at this, how do you decipher what part of the font URL codes are unnecessary and can be deleted? In part of the video I noticed that you deleted some of the copied links in the code. Thanks in advanced for your reply! 😊

[@AddColors2525]

Does it depend on users’ browsers? For example, if users use MS Edge instead of Chrome, does it still show the font you imported or does it show the default font?

[@palmwaytech]

That is for local install for custom fonts , how abut on a real website . Having an issue with naming folders and how ,Is there a service some where i can pay for some help to get one on one help .Is there a tutorial out there that wil explain how to install fonts on your web site? I have no problem using them on my personal computer , online on a real website , im having some issuess.;. Thank. you for any assistance.

[@fekrtmido2694]

Can you pls do a video about how to connect your login page to the shopping cart with order history?

[@shubhanshsharma3481]

thanks bhai

[@GhostMFK-JHB]

Hey Dani, thank you so much for this video. How can I try to fix this problem you mentioned here 8:00 as I am now experiencing the same issue where by from the local drive, the font worked, however, it does not work online on the website. Any solution will be much appreciated.

[@Dani_Krossing]

In the next video I talk about how local fonts are actually better 🙂 since using CDN fonts from online can actually get you into trouble in some countries

[@mkcexperience5334]

double like!

[@aj-dq6st]

Google fonts provides 2 variations for Nunito Sans, 7pt and 10pt ttf files. What's the difference b/w them and which is standard one?

[@ARhaze2x]

im having an issue where when I look up the font im not being given the option to download individual sizes but my project only allows certain sizes to pass inspection. wondering what I could do?

[@Dani_Krossing]

You don’t “select sizes” when you download a font, it just comes in one size. You need to change the font size using CSS. 🙂 For example: p { font-size: 24px; }

[@ARhaze2x]

@@Dani_Krossing I'm sorry im meaning how the "+" symbol is popping up for you to select the weights individually. I am not being given that option and do not know how to write the individual weights in the code for my school project rather including every variation as my project only accepts the specific weights. f.e I need only inter regular 400, medium 500, and bold 700 & noto serif regular 400, and regular 400 italic and im not being given the option to form the code for just those weights. how could I write them in manually?

[@Dani_Krossing]

The fonts you get off of the internet, will allow certain weights, depending on how many types the font creator made. If the + doesn’t have the font weight options you want, then it’s because they aren’t available unfortunately. What you can try and do as a last resort, is to just include a “font-weight” CSS styling anyways, and see if the outcome turns out okay. If not, then you will have to pick another font online, that does allow the correct weight. 😕

[@veerraptor12]

the google fonts website doesnt have the select button? help plz

[@Dani_Krossing]

I believe you just download them all by default now 🙂

[@bladewraith]

Loving these vids. Quick question: I tried to expand the hover effect so that the size is increased, but it also alters the size of the logo....on the hover. How do I avoid that? Or is it because the logo and nva are in the same div. I want this behaviour on all links so I didn't put this in .navigation ul li a{} a{ cursor: pointer; -webkit-transition:0.1s; transition-timing-function: ease-in-out; transition-delay: 0.1s; }

[@bladewraith]

Full css body{ background-color: rgb(5, 83, 46); } a{ cursor: pointer; -webkit-transition:0.1s; transition-timing-function: ease-in-out; transition-delay: 0.1s; } a:hover{ -webkit-transition:0.1s; transition-timing-function:ease-in-out; transition-delay: 0.1s; } .header-main { width: 100%; height: 90px; display: flex; justify-content: space-evenly; } .logo{ width: fit-content; height: 100%; display: flex; justify-content: space-evenly; } .logo img{ height: 80px; align-self: center; padding-left: 60px; } .navigation{ width: fit-content; height: 100%; padding-right: 60px; } .navigation ul{ list-style: none; margin-left: 40px; } .navigation ul li{ display: inline; float:left; margin-right: 15px; } .navigation ul li a{ padding: 0 5px; line-height: 90px; color: #53bbbb; font-size: 30px; font-family: 'Grenze', serif; } .navigation ul li a:hover{ color: #bdb0fe; font-size:35px; }

[@thomas6863]

idk why but some fonts do not work on vscode for me like realy nothing changed when I changed it to Roboto. like i have the feeling that it ignores the style and just goes to san-serif

[@Dani_Krossing]

I did mention that some fonts might not work, however something you could try is to clear the browsers cached files and images. Browsers tend to “remember” styling by caching it, to reduce load times, and this can make your CSS not change. You can clear the cached files and images in the same place where you clear your browser history 🙂 The shortcut is Ctrl + h

[@thomas6863]

​@@Dani_KrossingUnfortunately nothing changed. I do use google fonts so that's weird. By downloading it obviously works. And actually I just tried numerous fonts and it always picks the: san-serif or cursive or whatever is the last.

[@Dani_Krossing]

Hmmm only thing I can think of then, is that there is a typo somewhere where you included the link. Linking to Google’s fonts should work in all cases.

[@thomas6863]

@Dani Krossing It seems to be working now. I guess I forgot to do the basic thing and turn everything off and on. ty for trying to help

[@coderswat]

Hello sir

[@shahriaralamayan]

8:27 you said hashtag (#) instead of at (@)

[@Gaurav164]

YOU LOOK LIKE ELON MUSK