13 | HOW TO IMPORT NEW FONTS USING HTML | 2023 | Learn HTML and CSS Full Course for Beginners
HTML-код
- Опубликовано: 6 янв 2023
- In this video I will teach you how to import new custom fonts using HTML and CSS. 🙂 Importing custom fonts to your website will make it a lot more unique and interesting.
Full playlist: • 1 | INTRODUCTION TO HT...
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon and RUclips Memberships to share improved and updated lesson material, and for a small fee you can access all the material either from my memberships or Patreon, depending on your preference. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Memberships: / @dani_krossing
Patreon: / mmtuts
![mgk - I Think I’m OKAY (with YUNGBLUD) (Sad Version) [Official Music Video]](http://i.ytimg.com/vi/7AC1uqQLIg4/mqdefault.jpg)
I just spent 4 hours watching videos to do this and you helped me do it in 4 minutes 😂❤ I just subscribed thank you 🎉
OMG Thank you soooooo much for this! I was spending at least 2 hours trying to figure this out.
between 11-13, so much useful content. Enjoy that you give multiple options, since some companies have restrictions (web design)
Thanks for sharing free knowledge
Thank you ,Really Help Full For me
you are the best, your video solved my problem
Great tutorial works perfectly:)
Nice one... really nice and torough video
Thankyou so much sir ❤❤❤🎉
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 😎
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. 🙂👍
Hello Christian, can you explain to me in more easy way . Thanks!
@@Big_Dot_Inc Externally hosted Google Fonts without clunky Cookie Banner bad
@@christian-schubert So if I download the fonts inside webpage fonts folder I am good to go ?
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?
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?
Tank you sharing knowledge
Thankss!! i was lacking the .. lol
THANK YOU SOOOOOOOOOOOOOOOOOOOO MUCH
thanks bhai
Can you pls do a video about how to connect your login page to the shopping cart with order history?
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.
My channel has always been a "multimedia channel" 🙂 So it has all sorts of tutorials related to any digital media.
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.
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
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?
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;
}
@@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?
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. 😕
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
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
@@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.
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.
@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
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;
}
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;
}
double like!
Hello sir
8:27 you said hashtag (#) instead of at (@)
YOU LOOK LIKE ELON MUSK