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

Sdílet
Vložit
  • čas přidán 8. 09. 2024

Komentáře • 148

  • @thequnson
    @thequnson Před rokem +16

    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
    @GetOffMyKittieNuts Před 9 měsíci +2

    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.

  • @adhirajagarwal9640
    @adhirajagarwal9640 Před 2 lety +6

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

    • @ieatwebsites
      @ieatwebsites  Před 2 lety +1

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

  • @NoTimeWaste1
    @NoTimeWaste1 Před 3 měsíci

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

  • @kyleclarke4845
    @kyleclarke4845 Před rokem +2

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

  • @guywnoname
    @guywnoname Před měsícem

    I was stuck on this for about an hour this video really helped thanks :D

  • @paulscott4962
    @paulscott4962 Před 2 lety +18

    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 Před rokem +3

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

    • @ieatwebsites
      @ieatwebsites  Před rokem +3

      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 Před 11 měsíci

      When i download a font it turns into a map

  • @kellywauz9615
    @kellywauz9615 Před 11 měsíci +1

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

  • @akillesavramidis102
    @akillesavramidis102 Před 2 lety +2

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

  • @bianchimena9373
    @bianchimena9373 Před 2 lety +4

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

  • @zuhal5566
    @zuhal5566 Před 2 lety +1

    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.

  • @eskomumbalaii766
    @eskomumbalaii766 Před 2 lety +2

    Installed, everything works, thanks!

  • @smartwork7098
    @smartwork7098 Před rokem +1

    Thanks man, it works perfectly even with webpack!

  • @nachobaronetto1625
    @nachobaronetto1625 Před 2 lety +1

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

  • @Trmwt
    @Trmwt Před rokem

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

  • @thankants
    @thankants Před rokem +1

    Thank you dear from Kerala ❤

  • @alkadoHs
    @alkadoHs Před rokem +1

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

  • @luvurself_idk871
    @luvurself_idk871 Před měsícem

    thanks for the video, very helpful and simplicstic.

  • @TerryKovarik
    @TerryKovarik Před rokem +3

    Quick and easy to follow. Nice job!

  • @purplexionroblox
    @purplexionroblox Před 2 lety +1

    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.

  • @mamthaadepu2312
    @mamthaadepu2312 Před 2 lety +2

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

  • @barsyasar6675
    @barsyasar6675 Před rokem +1

    very clear explanation

  • @debojitbhattacharjee4017

    Awesome explain bro,thanks

  • @rizkys8791
    @rizkys8791 Před rokem +1

    u solve my problem, thanks mate

  • @ANIKETKHAREnullRA
    @ANIKETKHAREnullRA Před 2 lety +2

    keep uploading videos like this ! love your content

  • @bassbeatshome4028
    @bassbeatshome4028 Před 2 lety +1

    Thank you.. you saved my life 😁💫🤟

  • @amirbashir5463
    @amirbashir5463 Před rokem

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

  • @txsy-system
    @txsy-system Před 9 měsíci +1

    Very helpful thanks

  • @Denied.
    @Denied. Před rokem +1

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

  • @x_Tonka
    @x_Tonka Před rokem +1

    very clear, very good, thank you very much

  • @lunar6613
    @lunar6613 Před 2 lety +2

    So informative, thanks a lot!

  • @NOOB-yt8js
    @NOOB-yt8js Před 7 měsíci +1

    Thank you

  • @mohammadreduan6703
    @mohammadreduan6703 Před 2 lety +1

    Thank for giving very nice video...

  • @tarekbaarini
    @tarekbaarini Před rokem +1

    thank you man this was helpfull

  • @huepainting
    @huepainting Před 2 lety +1

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

  • @ttttddddddnjsbjdk4117
    @ttttddddddnjsbjdk4117 Před 2 lety +1

    TNice tutorials was easy to follow.

  • @sangeetatamori4107
    @sangeetatamori4107 Před 13 dny

    Thank you very much 😊

  • @romer-dev
    @romer-dev Před rokem

    Straight forward, THank you sir new subscriber here

  • @DougRalph-vu1if
    @DougRalph-vu1if Před rokem

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

  • @lucascantarelli8707
    @lucascantarelli8707 Před 2 lety +1

    simple and clean, ty man!

  • @krunalsawarkar6103
    @krunalsawarkar6103 Před rokem +1

    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  Před rokem

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

  • @chaitanyapaigude8094
    @chaitanyapaigude8094 Před 2 lety +2

    Thnx pretty easy 😄

  • @mafiamac
    @mafiamac Před 2 lety +13

    its not working for me

    • @javatrolling390
      @javatrolling390 Před 2 lety +1

      same

    • @purplexionroblox
      @purplexionroblox Před 2 lety +2

      @@javatrolling390 how?

    • @TheGrimPhreaker
      @TheGrimPhreaker Před 2 lety +1

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

    • @Trmwt
      @Trmwt Před rokem +1

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

    • @gabethecool
      @gabethecool Před rokem

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

  • @priscilabird294
    @priscilabird294 Před 4 měsíci

    Thank you so much!

  • @fercherl6843
    @fercherl6843 Před rokem

    This helped me so much! Perfect tutorial

  • @hardinrami8500
    @hardinrami8500 Před rokem +1

    Thank you!

  • @S7udio1381
    @S7udio1381 Před rokem

    Thank you. This helped.

  • @JimmyCrackorn
    @JimmyCrackorn Před 18 dny

    Would this concept also work for using my own icon library??? I'm guessing it would require using something other than @font-face though. I had been trying to find something similar to this - except with my own icons. I'm learning from your custom player series and created my own buttons. But those are local because I don't have the budget to pay for another service just to upload and use them from Font Awesome, _et al._ At least that way, I can simply convert my PNG's over to SVG's so that I can resize them - at least according to what I've been reading, I would need to so that I can size them appropriately.
    I'd like to use my own buttons because I'm designing unique features that existing icon sets don't have anything for. If I mix them, the design language will be broken. I'm trying to launch with a retro idea. It's going to be like how people using VCR's in 2004 would imagine VCR's in the far-flung future. Like, they would assume that VCR's would still be the norm in, say, 2065. And I'm playing on that assumption to design an experience like they would expect, right down to backlit RGB buttons. So, I'm trying to make use of those after investing 10 hours into making them for this project.
    I couldn't spot any tutorials for adding them to my stylesheet, so I thought I'd ask after seeing this.

  • @kanakkury5726
    @kanakkury5726 Před rokem

    Many many thanks.

  • @cheeseandchill
    @cheeseandchill Před 2 lety +1

    Thanks

  • @johnabrahamtosin9723
    @johnabrahamtosin9723 Před 2 lety

    thanks bro, it was really helpful and a life saver

  • @mubashir9659
    @mubashir9659 Před rokem

    thank for the quick help!

  • @Manga4u585
    @Manga4u585 Před rokem

    thank you so muchhhh
    your videos are rich which content

  • @ujjwalrustagi8690
    @ujjwalrustagi8690 Před 2 lety +1

    Thanks. It really helped me❤

  • @hamadkhan3248
    @hamadkhan3248 Před rokem +1

    thankyou bro vamos

  • @hemanthkumar9723
    @hemanthkumar9723 Před 2 lety

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

  • @SharathLingam
    @SharathLingam Před rokem +1

    Thank you so much.

  • @sadis4433
    @sadis4433 Před 2 lety

    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.

  • @Kunal-yg9fs
    @Kunal-yg9fs Před 3 měsíci

    thanks buddy!!

  • @katiemusgrave2824
    @katiemusgrave2824 Před rokem +1

    thank you!!!!

  • @ihssanenedjaoui1444
    @ihssanenedjaoui1444 Před rokem

    thank you a lot

  • @yasuiasianstore7852
    @yasuiasianstore7852 Před 2 lety

    so sNice tutorialt like that

  • @erva2641
    @erva2641 Před rokem

    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

  • @airpet3870
    @airpet3870 Před 2 lety

    best luck!

  • @phh235
    @phh235 Před rokem +1

    tks bro

  • @KennethPlaysOfficial
    @KennethPlaysOfficial Před 11 měsíci +1

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

  • @rangabharath4253
    @rangabharath4253 Před 3 lety +1

    Awesome as always 👍

  • @aritra3004
    @aritra3004 Před 3 lety +1

    Thanks brotha!!

  • @penguinval7
    @penguinval7 Před rokem +1

    nice video

  • @DinoLorenzo
    @DinoLorenzo Před rokem +1

    thanks

  • @nadeeshaliyana
    @nadeeshaliyana Před 2 lety

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

  • @nawarcode8113
    @nawarcode8113 Před rokem +1

    THANKS!

  • @themasterproller7638
    @themasterproller7638 Před 2 lety +1

    Thx u

  • @natasadovenkopopular9878

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

  • @dchandrashekhar4680
    @dchandrashekhar4680 Před 7 měsíci

    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

  • @miskcoop4388
    @miskcoop4388 Před 2 lety +1

    life is life la laa - la la la bruh

  • @mydaily21
    @mydaily21 Před rokem

    what the fucntion from format (truetype)?

  • @pgworldfreightsolution4450

    TRIGGERED

  • @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  Před rokem

      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.

  • @oluwatobilobaibuola5950

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

  • @ingeniouspotatohead1517

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

  • @anianu7743
    @anianu7743 Před 2 lety

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

  • @vigneshwar71
    @vigneshwar71 Před rokem

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

    • @yntkns6094
      @yntkns6094 Před 3 měsíci

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

  • @yvonephilipnicanor
    @yvonephilipnicanor Před 2 lety

    Can you use it to resetup s?

  • @aadityamittal3588
    @aadityamittal3588 Před rokem

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

  • @XeiDaMoKaFE
    @XeiDaMoKaFE Před 2 lety

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

  • @sillybella8762
    @sillybella8762 Před 6 dny

    didnt work for me :(

  • @vansh6759
    @vansh6759 Před rokem

    bro,How can i get of text?

  • @sathvikmalgikar2842
    @sathvikmalgikar2842 Před rokem

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

  • @abdulrahmankamel6222
    @abdulrahmankamel6222 Před 2 lety

    so how can I download the font file?

  • @aldwenbarte3021
    @aldwenbarte3021 Před 2 lety

    Please can I approach yours

  • @bond2169
    @bond2169 Před 2 lety

    who else is here from nonsense humor

  • @gabethecool
    @gabethecool Před rokem

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

  • @senju31
    @senju31 Před rokem

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

  • @johanesalberto6136
    @johanesalberto6136 Před rokem +1

    thank you so much bro

  • @TraydonDunkheel
    @TraydonDunkheel Před 2 lety +1

    Thanks so much!

  • @XBEAST321
    @XBEAST321 Před rokem +1

    Thanks

  • @czaszkagra
    @czaszkagra Před 5 měsíci

    Thanks!!!

  • @ciyaarahadunidaoffical5474

    Please can I approach yours

  • @Tapzi
    @Tapzi Před 2 lety +1

    Thank you!!