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

  • @thequnson
    @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
    @GetOffMyKittieNuts7 ай бұрын

    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
    @bianchimena9373 Жыл бұрын

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

  • @eskomumbalaii766
    @eskomumbalaii766 Жыл бұрын

    Installed, everything works, thanks!

  • @adhirajagarwal9640
    @adhirajagarwal96402 жыл бұрын

    U got some cool interesting content. I m surprised u just have 40k. U rly deserve a lot more

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    Thank you so much. I just do it for comments like this. Makes me feel great.

  • @lunar6613
    @lunar6613 Жыл бұрын

    So informative, thanks a lot!

  • @smartwork7098
    @smartwork7098 Жыл бұрын

    Thanks man, it works perfectly even with webpack!

  • @fercherl6843
    @fercherl6843 Жыл бұрын

    This helped me so much! Perfect tutorial

  • @NoTimeWaste1
    @NoTimeWaste1Ай бұрын

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

  • @ANIKETKHAREnullRA
    @ANIKETKHAREnullRA2 жыл бұрын

    keep uploading videos like this ! love your content

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    I will! Thank you!

  • @TerryKovarik
    @TerryKovarik Жыл бұрын

    Quick and easy to follow. Nice job!

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    Thank you!

  • @akillesavramidis102
    @akillesavramidis1022 жыл бұрын

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

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You welcome!!

  • @nachobaronetto1625
    @nachobaronetto1625 Жыл бұрын

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

  • @Trmwt
    @Trmwt Жыл бұрын

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

  • @mubashir9659
    @mubashir9659 Жыл бұрын

    thank for the quick help!

  • @lucascantarelli8707
    @lucascantarelli87072 жыл бұрын

    simple and clean, ty man!

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You welcome!

  • @bassbeatshome4028
    @bassbeatshome4028 Жыл бұрын

    Thank you.. you saved my life 😁💫🤟

  • @kellywauz9615
    @kellywauz96159 ай бұрын

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

  • @tarekbaarini
    @tarekbaarini Жыл бұрын

    thank you man this was helpfull

  • @amirbashir5463
    @amirbashir546311 ай бұрын

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

  • @barsyasar6675
    @barsyasar6675 Жыл бұрын

    very clear explanation

  • @alkadoHs
    @alkadoHs Жыл бұрын

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

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome!

  • @romer-dev
    @romer-dev Жыл бұрын

    Straight forward, THank you sir new subscriber here

  • @S7udio1381
    @S7udio1381 Жыл бұрын

    Thank you. This helped.

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    Glad it helped!

  • @huepainting
    @huepainting2 жыл бұрын

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

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You welcome!

  • @rangabharath4253
    @rangabharath42532 жыл бұрын

    Awesome as always 👍

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    Thank you!

  • @purplexionroblox
    @purplexionroblox2 жыл бұрын

    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

    @ieatwebsites

    2 жыл бұрын

    You are welcome!

  • @kyleclarke4845
    @kyleclarke4845 Жыл бұрын

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

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    Thank you!! 🙏

  • @priscilabird294
    @priscilabird2942 ай бұрын

    Thank you so much!

  • @hemanthkumar9723
    @hemanthkumar97232 жыл бұрын

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

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You welcome!

  • @johnabrahamtosin9723
    @johnabrahamtosin97232 жыл бұрын

    thanks bro, it was really helpful and a life saver

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You welcome!

  • @mamthaadepu2312
    @mamthaadepu23122 жыл бұрын

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

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You are very welcome 🙏

  • @ujjwalrustagi8690
    @ujjwalrustagi86902 жыл бұрын

    Thanks. It really helped me❤

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You welcome!

  • @rizkys8791
    @rizkys8791 Жыл бұрын

    u solve my problem, thanks mate

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome!

  • @mohammadreduan6703
    @mohammadreduan67032 жыл бұрын

    Thank for giving very nice video...

  • @zuhal5566
    @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.

  • @debojitbhattacharjee4017
    @debojitbhattacharjee4017 Жыл бұрын

    Awesome explain bro,thanks

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome!

  • @Denied.
    @Denied. Жыл бұрын

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

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You are very welcome!

  • @TraydonDunkheel
    @TraydonDunkheel Жыл бұрын

    Thanks so much!

  • @x_Tonka
    @x_Tonka Жыл бұрын

    very clear, very good, thank you very much

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome! 😀

  • @kanakkury5726
    @kanakkury572611 ай бұрын

    Many many thanks.

  • @Manga4u585
    @Manga4u585 Жыл бұрын

    thank you so muchhhh your videos are rich which content

  • @txsy-system
    @txsy-system6 ай бұрын

    Very helpful thanks

  • @ieatwebsites

    @ieatwebsites

    6 ай бұрын

    You welcome!

  • @hardinrami8500
    @hardinrami8500 Жыл бұрын

    Thank you!

  • @chaitanyapaigude8094
    @chaitanyapaigude8094 Жыл бұрын

    Thnx pretty easy 😄

  • @thankants
    @thankants Жыл бұрын

    Thank you dear from Kerala ❤

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome

  • @Kunal-yg9fs
    @Kunal-yg9fsАй бұрын

    thanks buddy!!

  • @johanesalberto6136
    @johanesalberto6136 Жыл бұрын

    thank you so much bro

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome!

  • @NOOB-yt8js
    @NOOB-yt8js5 ай бұрын

    Thank you

  • @aritra3004
    @aritra30042 жыл бұрын

    Thanks brotha!!

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You welcome!

  • @SharathLingam
    @SharathLingam Жыл бұрын

    Thank you so much.

  • @ihssanenedjaoui1444
    @ihssanenedjaoui1444 Жыл бұрын

    thank you a lot

  • @XBEAST321
    @XBEAST321 Жыл бұрын

    Thanks

  • @DougRalph-vu1if
    @DougRalph-vu1if Жыл бұрын

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

  • @Tapzi
    @Tapzi2 жыл бұрын

    Thank you!!

  • @ieatwebsites

    @ieatwebsites

    2 жыл бұрын

    You welcome!

  • @paulscott4962
    @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

    @solarestone

    Жыл бұрын

    Yes, same, that's why I cicked in the video!

  • @ieatwebsites

    @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

    @lilili765

    9 ай бұрын

    When i download a font it turns into a map

  • @ttttddddddnjsbjdk4117
    @ttttddddddnjsbjdk4117 Жыл бұрын

    TNice tutorials was easy to follow.

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome!

  • @czaszkagra
    @czaszkagra3 ай бұрын

    Thanks!!!

  • @yasuiasianstore7852
    @yasuiasianstore7852 Жыл бұрын

    so sNice tutorialt like that

  • @katiemusgrave2824
    @katiemusgrave2824 Жыл бұрын

    thank you!!!!

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You are very welcome!

  • @airpet3870
    @airpet3870 Жыл бұрын

    best luck!

  • @hamadkhan3248
    @hamadkhan3248 Жыл бұрын

    thankyou bro vamos

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    Vamos! Gracias!

  • @erva2641
    @erva2641 Жыл бұрын

    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

  • @yvonephilipnicanor
    @yvonephilipnicanor Жыл бұрын

    Can you use it to resetup s?

  • @sadis4433
    @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.

  • @XeiDaMoKaFE
    @XeiDaMoKaFE2 жыл бұрын

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

  • @krunalsawarkar6103
    @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

    @ieatwebsites

    Жыл бұрын

    Is visible to everyone. Make sure you are hosting the fonts too.

  • @aadityamittal3588
    @aadityamittal3588 Жыл бұрын

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

  • @DinoLorenzo
    @DinoLorenzo Жыл бұрын

    thanks

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome!

  • @mydaily21
    @mydaily21 Жыл бұрын

    what the fucntion from format (truetype)?

  • @penguinval7
    @penguinval7 Жыл бұрын

    nice video

  • @phh235
    @phh235 Жыл бұрын

    tks bro

  • @natasadovenkopopular9878
    @natasadovenkopopular9878 Жыл бұрын

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

  • @abdulrahmankamel6222
    @abdulrahmankamel6222 Жыл бұрын

    so how can I download the font file?

  • @themasterproller7638
    @themasterproller7638 Жыл бұрын

    Thx u

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    You welcome!

  • @nadeeshaliyana
    @nadeeshaliyana Жыл бұрын

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

  • @vansh6759
    @vansh6759 Жыл бұрын

    bro,How can i get of text?

  • @oluwatobilobaibuola5950
    @oluwatobilobaibuola59502 жыл бұрын

    if i have my font format in otf, it will work still? nice content bro

  • @purplexionroblox

    @purplexionroblox

    2 жыл бұрын

    yeah it still works it worked for me

  • @dchandrashekhar4680
    @dchandrashekhar46805 ай бұрын

    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

  • @mafiamac
    @mafiamac2 жыл бұрын

    its not working for me

  • @javatrolling390

    @javatrolling390

    2 жыл бұрын

    same

  • @purplexionroblox

    @purplexionroblox

    2 жыл бұрын

    @@javatrolling390 how?

  • @TheGrimPhreaker

    @TheGrimPhreaker

    2 жыл бұрын

    Same here. Followed everything step by step. Still does not show my custom font

  • @Trmwt

    @Trmwt

    Жыл бұрын

    @@TheGrimPhreaker look in the HTML, are you sure CSS and HTML are connected ?

  • @gabethecool

    @gabethecool

    Жыл бұрын

    ​@@Trmwthow do I connect them? I'm using a different program btw so idk if that changes anything

  • @KennethPlaysOfficial
    @KennethPlaysOfficial9 ай бұрын

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

  • @ingeniouspotatohead1517
    @ingeniouspotatohead15172 жыл бұрын

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

  • @pgworldfreightsolution4450
    @pgworldfreightsolution4450 Жыл бұрын

    TRIGGERED

  • @anianu7743
    @anianu7743 Жыл бұрын

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

  • @vigneshwar71
    @vigneshwar71 Жыл бұрын

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

  • @yntkns6094

    @yntkns6094

    Ай бұрын

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

  • @tradinglibrarystation
    @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

    @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.

  • @aldwenbarte3021
    @aldwenbarte3021 Жыл бұрын

    Please can I approach yours

  • @miskcoop4388
    @miskcoop4388 Жыл бұрын

    life is life la laa - la la la bruh

  • @sathvikmalgikar2842
    @sathvikmalgikar2842 Жыл бұрын

    thank you sir but why is something so basic and primitive thing so hard to do

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    Why is hard?

  • @bond2169
    @bond2169 Жыл бұрын

    who else is here from nonsense humor

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    From where?

  • @nawarcode8113
    @nawarcode8113 Жыл бұрын

    THANKS!

  • @gabethecool
    @gabethecool Жыл бұрын

    Does the tutorial differ if I'm using a different program to code this? Im using Koder

  • @ieatwebsites

    @ieatwebsites

    Жыл бұрын

    No

  • @senju31
    @senju31 Жыл бұрын

    I'm trying this with brightsome-free-personal-use.font but it's not working. Could anyone help?

  • @cheeseandchill
    @cheeseandchill Жыл бұрын

    Thanks

  • @ciyaarahadunidaoffical5474
    @ciyaarahadunidaoffical5474 Жыл бұрын

    Please can I approach yours

  • @aliston_gomes
    @aliston_gomes7 ай бұрын

    Thanks