How to Add a Custom Fonts to Your Website (HTML and CSS)

Подписаться 46 тыс.

Просмотров 148 тыс.

50% 1

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

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 143

@thequnson Год назад

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.

@GetOffMyKittieNuts 6 месяцев назад

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.

@bianchimena9373 Год назад

Worked like a charm, easy to follow tutorial, thank you!

@eskomumbalaii766 Год назад

Installed, everything works, thanks!

@adhirajagarwal9640 2 года назад

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.

@lunar6613 Год назад

So informative, thanks a lot!

@smartwork7098 Год назад

Thanks man, it works perfectly even with webpack!

@NoTimeWaste1 13 дней назад

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!!

@TerryKovarik Год назад

Quick and easy to follow. Nice job!

@ieatwebsites Год назад

Thank you!

@akillesavramidis102 2 года назад

Thank you so much! This really helped me out, I was so confused before this video. Thanks once again!

@ieatwebsites 2 года назад

You welcome!!

@nachobaronetto1625 Год назад

Thanks dude...It helps alot especially on beginners like

@fercherl6843 Год назад

This helped me so much! Perfect tutorial

@ANIKETKHAREnullRA 2 года назад

keep uploading videos like this ! love your content

@ieatwebsites 2 года назад

I will! Thank you!

@alkadoHs Год назад

Thank you dude this is what i was looking for.. It's really helpful

@ieatwebsites Год назад

You welcome!

@mubashir9659 11 месяцев назад

thank for the quick help!

@kellywauz9615 8 месяцев назад

Very good, works perfectly fine. Lot of trash tutorials out there sadly, this one is very good.

@lucascantarelli8707 Год назад

simple and clean, ty man!

@ieatwebsites Год назад

You welcome!

@Trmwt Год назад

Thank you very very very much, I tried 100 times before. This time it worked. thanks

@huepainting 2 года назад

Thank you sir. Just what I needed. Liked and subscribed.

@ieatwebsites 2 года назад

You welcome!

@tarekbaarini Год назад

thank you man this was helpfull

@bassbeatshome4028 Год назад

Thank you.. you saved my life 😁💫🤟

@kyleclarke4845 Год назад

Why don't any of the other tutorials just do this? great explanation! Earned a sub.

@ieatwebsites Год назад

Thank you!! 🙏

@romer-dev Год назад

Straight forward, THank you sir new subscriber here

@mamthaadepu2312 2 года назад

Thank you for this... It did helped me in my learning!!!

@ieatwebsites 2 года назад

You are very welcome 🙏

@barsyasar6675 Год назад

very clear explanation

@rangabharath4253 2 года назад

Awesome as always 👍

@ieatwebsites 2 года назад

Thank you!

@DougRalph-vu1if Год назад

Excellent video and explained it all well. Thank you. Can I ask what is that app / programme that you se there please?

@johnabrahamtosin9723 2 года назад

thanks bro, it was really helpful and a life saver

@ieatwebsites 2 года назад

You welcome!

@purplexionroblox 2 года назад

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!

@mohammadreduan6703 Год назад

Thank for giving very nice video...

@Denied. Год назад

Thank you so much, this helped me so much lol.

@ieatwebsites Год назад

You are very welcome!

@S7udio1381 Год назад

Thank you. This helped.

@ieatwebsites Год назад

Glad it helped!

@ujjwalrustagi8690 2 года назад

Thanks. It really helped me❤

@ieatwebsites 2 года назад

You welcome!

@hemanthkumar9723 2 года назад

YOU SAVED A LOT OF TIME DUUD... tHANK yOu.

@ieatwebsites 2 года назад

You welcome!

@debojitbhattacharjee4017 Год назад

Awesome explain bro,thanks

@ieatwebsites Год назад

You welcome!

@x_Tonka Год назад

very clear, very good, thank you very much

@ieatwebsites Год назад

You welcome! 😀

@rizkys8791 Год назад

u solve my problem, thanks mate

@ieatwebsites Год назад

You welcome!

@paulscott4962 Год назад

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 8 месяцев назад

When i download a font it turns into a map

@krunalsawarkar6103 Год назад

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.

@amirbashir5463 10 месяцев назад

Yall bro is legit.......bro is him

@priscilabird294 Месяц назад

Thank you so much!

@TraydonDunkheel Год назад

Thanks so much!

@zuhal5566 Год назад

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.

@chaitanyapaigude8094 Год назад

Thnx pretty easy 😄

@Kunal-yg9fs 11 дней назад

thanks buddy!!

@kanakkury5726 10 месяцев назад

Many many thanks.

@goodness9445 5 месяцев назад

Very helpful thanks

@ieatwebsites 5 месяцев назад

You welcome!

@Manga4u585 Год назад

thank you so muchhhh your videos are rich which content

@hardinrami8500 Год назад

Thank you!

@thankants Год назад

Thank you dear from Kerala ❤

@ieatwebsites Год назад

You welcome

@aadityamittal3588 Год назад

Sir, can you tell the name of theme you are using?

@aritra3004 2 года назад

Thanks brotha!!

@ieatwebsites 2 года назад

You welcome!

@erva2641 11 месяцев назад

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

@johanesalberto6136 Год назад

thank you so much bro

@ieatwebsites Год назад

You welcome!

@NOOB-yt8js 4 месяца назад

Thank you

@czaszkagra 2 месяца назад

Thanks!!!

@ttttddddddnjsbjdk4117 Год назад

TNice tutorials was easy to follow.

@ieatwebsites Год назад

You welcome!

@Tapzi 2 года назад

Thank you!!

@ieatwebsites 2 года назад

You welcome!

@ihssanenedjaoui1444 10 месяцев назад

thank you a lot

@yasuiasianstore7852 Год назад

so sNice tutorialt like that

@cheeseandchill Год назад

Thanks

@XeiDaMoKaFE 2 года назад

how do I store my own custom font online to use it with a link ?

@airpet3870 Год назад

best luck!

@yvonephilipnicanor Год назад

Can you use it to resetup s?

@katiemusgrave2824 Год назад

thank you!!!!

@ieatwebsites Год назад

You are very welcome!

@natasadovenkopopular9878 Год назад

how i can do this in Blogger website? I tried more times, but nothing

@penguinval7 Год назад

nice video

@oluwatobilobaibuola5950 2 года назад

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

@mydaily21 Год назад

what the fucntion from format (truetype)?

@dchandrashekhar4680 4 месяца назад

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

@hamadkhan3248 Год назад

thankyou bro vamos

@ieatwebsites Год назад

Vamos! Gracias!

@abdulrahmankamel6222 Год назад

so how can I download the font file?

@sadis4433 Год назад

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.

@SharathLingam Год назад

Thank you so much.

@phh235 Год назад

tks bro

@nadeeshaliyana Год назад

when i click GMS it gives sotNice tutorialng that softs electrical with no app soft whatsoever

@pgworldfreightsolution4450 Год назад

TRIGGERED

@ingeniouspotatohead1517 Год назад

Didn’t work with Carbon Bold font, just wanted to let you know.

@DinoLorenzo Год назад

thanks

@ieatwebsites Год назад

You welcome!

@KennethPlaysOfficial 8 месяцев назад

it does not work for me whatever i do Edit: I fixed it I think I made a typo or something

@mafiamac 2 года назад

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

@vansh6759 Год назад

bro,How can i get of text?

@themasterproller7638 Год назад

Thx u

@ieatwebsites Год назад

You welcome!

@vigneshwar71 10 месяцев назад

it doesnt work for me can anyone explain me fully and tell how to add font file in vs code

@yntkns6094 11 дней назад

Do you have a font file that is in ttf file?

@anianu7743 Год назад

I’m sorry my ADHD doesn’t allow to sit still through tNice tutorials . I’ll be back so other ti

@tradinglibrarystation Год назад

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.