How to Add a Custom Fonts to Your Website (HTML and CSS)
In this video you will learn how to add custom fonts to your website or web app. This is not about Google or Adobe fonts, this is for fonts that you downloaded or created.
Download code:
github.com/brickbones/custom-...
Fonts used in this video:
www.dafont.com/roblox.font
befonts.com/memphis-river-fon...
My Code Editor is VS Code:
code.visualstudio.com/
Follow me:
/ ieatwebsites
Пікірлер: 143
After hitting a lot of non-working explanations, I just did it in 3 minutes by watching your demo. Good job, and thank you. And I subscribed.
Thank you for this tutorial. After doing a bunch of other very convoluted things from other tutorials that didn't even work, this was so simple and worked like a charm. Appreciate you.
Worked like a charm, easy to follow tutorial, thank you!
Installed, everything works, thanks!
U got some cool interesting content. I m surprised u just have 40k. U rly deserve a lot more
@ieatwebsites
2 жыл бұрын
Thank you so much. I just do it for comments like this. Makes me feel great.
So informative, thanks a lot!
Thanks man, it works perfectly even with webpack!
This helped me so much! Perfect tutorial
Thank you!! It looks like my previous file of font got corrupted, and I think that's the reason why it was not working. I tried using your fonts to see whether there's error in my system or in font-file. And there was an error in the font-file, I then again downloaded the new font-file, changed it to .ttf file and applied it again in my code. And it worked!!
keep uploading videos like this ! love your content
@ieatwebsites
2 жыл бұрын
I will! Thank you!
Quick and easy to follow. Nice job!
@ieatwebsites
Жыл бұрын
Thank you!
Thank you so much! This really helped me out, I was so confused before this video. Thanks once again!
@ieatwebsites
2 жыл бұрын
You welcome!!
Thanks dude...It helps alot especially on beginners like
Thank you very very very much, I tried 100 times before. This time it worked. thanks
thank for the quick help!
simple and clean, ty man!
@ieatwebsites
2 жыл бұрын
You welcome!
Thank you.. you saved my life 😁💫🤟
Very good, works perfectly fine. Lot of trash tutorials out there sadly, this one is very good.
thank you man this was helpfull
Yall bro is legit.......bro is him
very clear explanation
Thank you dude this is what i was looking for.. It's really helpful
@ieatwebsites
Жыл бұрын
You welcome!
Straight forward, THank you sir new subscriber here
Thank you. This helped.
@ieatwebsites
Жыл бұрын
Glad it helped!
Thank you sir. Just what I needed. Liked and subscribed.
@ieatwebsites
2 жыл бұрын
You welcome!
Awesome as always 👍
@ieatwebsites
2 жыл бұрын
Thank you!
Thank you so much I was trying to just directly put the font name inside the font-family attribute but it obviously didn't work. My fly-sized brain thought that since the font was installed on the computer I could use it in the code. Again thank you for the extremely informative video.
@ieatwebsites
2 жыл бұрын
You are welcome!
Why don't any of the other tutorials just do this? great explanation! Earned a sub.
@ieatwebsites
Жыл бұрын
Thank you!! 🙏
Thank you so much!
YOU SAVED A LOT OF TIME DUUD... tHANK yOu.
@ieatwebsites
2 жыл бұрын
You welcome!
thanks bro, it was really helpful and a life saver
@ieatwebsites
2 жыл бұрын
You welcome!
Thank you for this... It did helped me in my learning!!!
@ieatwebsites
2 жыл бұрын
You are very welcome 🙏
Thanks. It really helped me❤
@ieatwebsites
2 жыл бұрын
You welcome!
u solve my problem, thanks mate
@ieatwebsites
Жыл бұрын
You welcome!
Thank for giving very nice video...
You are a very gifted teacher. I've been teacNice tutorialng soft for over 50 years and really appreciate your video being a beginner in soft soft.
Awesome explain bro,thanks
@ieatwebsites
Жыл бұрын
You welcome!
Thank you so much, this helped me so much lol.
@ieatwebsites
Жыл бұрын
You are very welcome!
Thanks so much!
very clear, very good, thank you very much
@ieatwebsites
Жыл бұрын
You welcome! 😀
Many many thanks.
thank you so muchhhh your videos are rich which content
Very helpful thanks
@ieatwebsites
6 ай бұрын
You welcome!
Thank you!
Thnx pretty easy 😄
Thank you dear from Kerala ❤
@ieatwebsites
Жыл бұрын
You welcome
thanks buddy!!
thank you so much bro
@ieatwebsites
Жыл бұрын
You welcome!
Thank you
Thanks brotha!!
@ieatwebsites
2 жыл бұрын
You welcome!
Thank you so much.
thank you a lot
Thanks
Excellent video and explained it all well. Thank you. Can I ask what is that app / programme that you se there please?
Thank you!!
@ieatwebsites
2 жыл бұрын
You welcome!
Can you explain how you added fonts to your library, from the beginning? As in, I need to know how you got the .ttf files successfully imported. Thanks, and great video!
@solarestone
Жыл бұрын
Yes, same, that's why I cicked in the video!
@ieatwebsites
Жыл бұрын
It depends. I just downloaded the fonts from a website. There are hundreds of websites to download for free or buy fonts. Put your fonts in a folder on your project and get them from there.
@lilili765
9 ай бұрын
When i download a font it turns into a map
TNice tutorials was easy to follow.
@ieatwebsites
Жыл бұрын
You welcome!
Thanks!!!
so sNice tutorialt like that
thank you!!!!
@ieatwebsites
Жыл бұрын
You are very welcome!
best luck!
thankyou bro vamos
@ieatwebsites
Жыл бұрын
Vamos! Gracias!
i made it it does help but I have the error that it only changes the font on the header , but not on my div classes
Can you use it to resetup s?
arrow forward once to get "Analog app 1 TE" like he uses in the video or simply find one you'd like to use alternatively instead.
how do I store my own custom font online to use it with a link ?
Thanks man thats very helpful. Please clear my one doubt if i used custom fonts and im hosting my site so this will visible globally right? or just only on my browser?
@ieatwebsites
Жыл бұрын
Is visible to everyone. Make sure you are hosting the fonts too.
Sir, can you tell the name of theme you are using?
thanks
@ieatwebsites
Жыл бұрын
You welcome!
what the fucntion from format (truetype)?
nice video
tks bro
how i can do this in Blogger website? I tried more times, but nothing
so how can I download the font file?
Thx u
@ieatwebsites
Жыл бұрын
You welcome!
when i click GMS it gives sotNice tutorialng that softs electrical with no app soft whatsoever
bro,How can i get of text?
if i have my font format in otf, it will work still? nice content bro
@purplexionroblox
2 жыл бұрын
yeah it still works it worked for me
The requested font families are not available. Requested: OFL Sorts Mill Goudy TT (style: normal, weight: 400, {wght=300.0}),OFL Sorts Mill Goudy TT (style: normal, weight: 400, {wght=600.0}),OFL Sorts Mill Goudy TT (style: normal, weight: 400, {wght=700.0}),OFL Sorts Mill Goudy TT (style: normal, weight: 400, {wght=800.0}) WHAT IS SOLUTION FOR THESE ERROR
its not working for me
@javatrolling390
2 жыл бұрын
same
@purplexionroblox
2 жыл бұрын
@@javatrolling390 how?
@TheGrimPhreaker
2 жыл бұрын
Same here. Followed everything step by step. Still does not show my custom font
@Trmwt
Жыл бұрын
@@TheGrimPhreaker look in the HTML, are you sure CSS and HTML are connected ?
@gabethecool
Жыл бұрын
@@Trmwthow do I connect them? I'm using a different program btw so idk if that changes anything
it does not work for me whatever i do Edit: I fixed it I think I made a typo or something
Didn’t work with Carbon Bold font, just wanted to let you know.
TRIGGERED
I’m sorry my ADHD doesn’t allow to sit still through tNice tutorials . I’ll be back so other ti
it doesnt work for me can anyone explain me fully and tell how to add font file in vs code
@yntkns6094
Ай бұрын
Do you have a font file that is in ttf file?
take care bro, That any one will open the site might not have the same font on his device so you should only use the google fonts, and you can open all commands in the same container you don't have to write : @font-face every time, thank you
@ieatwebsites
Жыл бұрын
Custom fonts will load from the sever. People don’t need to have it in their computer. Google fonts is a great option if you find one you like.
Please can I approach yours
life is life la laa - la la la bruh
thank you sir but why is something so basic and primitive thing so hard to do
@ieatwebsites
Жыл бұрын
Why is hard?
who else is here from nonsense humor
@ieatwebsites
Жыл бұрын
From where?
THANKS!
Does the tutorial differ if I'm using a different program to code this? Im using Koder
@ieatwebsites
Жыл бұрын
No
I'm trying this with brightsome-free-personal-use.font but it's not working. Could anyone help?
Thanks
Please can I approach yours
Thanks