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

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 149

  • @thequnson
    @thequnson 2 роки тому +19

    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.

  • @adhirajagarwal9640
    @adhirajagarwal9640 3 роки тому +6

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

    • @ieatwebsites
      @ieatwebsites  3 роки тому +1

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

  • @kyleclarke4845
    @kyleclarke4845 Рік тому +2

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

  • @NoTimeWaste1
    @NoTimeWaste1 5 місяців тому

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

  • @paulscott4962
    @paulscott4962 2 роки тому +19

    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 2 роки тому +3

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

    • @ieatwebsites
      @ieatwebsites  2 роки тому +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 Рік тому

      When i download a font it turns into a map

  • @guywnoname
    @guywnoname 3 місяці тому

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

  • @zuhal5566
    @zuhal5566 2 роки тому +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.

  • @amirbashir5463
    @amirbashir5463 Рік тому

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

  • @bianchimena9373
    @bianchimena9373 2 роки тому +4

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

  • @TerryKovarik
    @TerryKovarik Рік тому +3

    Quick and easy to follow. Nice job!

  • @eskomumbalaii766
    @eskomumbalaii766 2 роки тому +2

    Installed, everything works, thanks!

  • @kellywauz9615
    @kellywauz9615 Рік тому +1

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

  • @smartwork7098
    @smartwork7098 Рік тому +1

    Thanks man, it works perfectly even with webpack!

  • @Trmwt
    @Trmwt Рік тому

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

  • @akillesavramidis102
    @akillesavramidis102 2 роки тому +2

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

  • @alkadoHs
    @alkadoHs Рік тому +1

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

  • @ANIKETKHAREnullRA
    @ANIKETKHAREnullRA 3 роки тому +2

    keep uploading videos like this ! love your content

  • @krunalsawarkar6103
    @krunalsawarkar6103 Рік тому +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  Рік тому

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

  • @purplexionroblox
    @purplexionroblox 2 роки тому +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.

  • @NOOB-yt8js
    @NOOB-yt8js 9 місяців тому +1

    Thank you

  • @nachobaronetto1625
    @nachobaronetto1625 2 роки тому +1

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

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

  • @thankants
    @thankants Рік тому +1

    Thank you dear from Kerala ❤

  • @debojitbhattacharjee4017
    @debojitbhattacharjee4017 Рік тому +1

    Awesome explain bro,thanks

  • @luvurself_idk871
    @luvurself_idk871 3 місяці тому

    thanks for the video, very helpful and simplicstic.

  • @barsyasar6675
    @barsyasar6675 Рік тому +1

    very clear explanation

  • @mamthaadepu2312
    @mamthaadepu2312 2 роки тому +2

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

  • @rizkys8791
    @rizkys8791 Рік тому +1

    u solve my problem, thanks mate

  • @JimmyCrackorn
    @JimmyCrackorn 2 місяці тому

    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.

  • @ttttddddddnjsbjdk4117
    @ttttddddddnjsbjdk4117 2 роки тому +1

    TNice tutorials was easy to follow.

  • @bassbeatshome4028
    @bassbeatshome4028 2 роки тому +1

    Thank you.. you saved my life 😁💫🤟

  • @txsy-system
    @txsy-system 11 місяців тому +1

    Very helpful thanks

  • @x_Tonka
    @x_Tonka Рік тому +1

    very clear, very good, thank you very much

  • @Denied.
    @Denied. Рік тому +1

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

  • @lucascantarelli8707
    @lucascantarelli8707 2 роки тому +1

    simple and clean, ty man!

  • @mubashir9659
    @mubashir9659 Рік тому

    thank for the quick help!

  • @tarekbaarini
    @tarekbaarini Рік тому +1

    thank you man this was helpfull

  • @romer-dev
    @romer-dev Рік тому

    Straight forward, THank you sir new subscriber here

  • @NataliaAlbornozParra
    @NataliaAlbornozParra 2 дні тому

    El mejor video ! Graaaacias🤓

  • @huepainting
    @huepainting 2 роки тому +1

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

  • @S7udio1381
    @S7udio1381 Рік тому

    Thank you. This helped.

  • @hemanthkumar9723
    @hemanthkumar9723 2 роки тому

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

  • @lunar6613
    @lunar6613 2 роки тому +2

    So informative, thanks a lot!

  • @mohammadreduan6703
    @mohammadreduan6703 2 роки тому +1

    Thank for giving very nice video...

  • @fercherl6843
    @fercherl6843 Рік тому

    This helped me so much! Perfect tutorial

  • @johanesalberto6136
    @johanesalberto6136 Рік тому +1

    thank you so much bro

  • @rangabharath4253
    @rangabharath4253 3 роки тому +1

    Awesome as always 👍

  • @johnabrahamtosin9723
    @johnabrahamtosin9723 2 роки тому

    thanks bro, it was really helpful and a life saver

  • @kanakkury5726
    @kanakkury5726 Рік тому

    Many many thanks.

  • @sadis4433
    @sadis4433 2 роки тому

    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.

  • @chaitanyapaigude8094
    @chaitanyapaigude8094 2 роки тому +2

    Thnx pretty easy 😄

  • @ujjwalrustagi8690
    @ujjwalrustagi8690 2 роки тому +1

    Thanks. It really helped me❤

  • @hamadkhan3248
    @hamadkhan3248 Рік тому +1

    thankyou bro vamos

  • @katiemusgrave2824
    @katiemusgrave2824 Рік тому +1

    thank you!!!!

  • @cheeseandchill
    @cheeseandchill 2 роки тому +1

    Thanks

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

  • @Kunal-yg9fs
    @Kunal-yg9fs 5 місяців тому

    thanks buddy!!

  • @oluwatobilobaibuola5950
    @oluwatobilobaibuola5950 2 роки тому

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

  • @aritra3004
    @aritra3004 3 роки тому +1

    Thanks brotha!!

  • @Tapzi
    @Tapzi 2 роки тому +1

    Thank you!!

  • @aadityamittal3588
    @aadityamittal3588 2 роки тому

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

  • @KennethPlaysOfficial
    @KennethPlaysOfficial Рік тому +1

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

  • @DinoLorenzo
    @DinoLorenzo Рік тому +1

    thanks

  • @Manga4u585
    @Manga4u585 Рік тому

    thank you so muchhhh
    your videos are rich which content

  • @airpet3870
    @airpet3870 2 роки тому

    best luck!

  • @mafiamac
    @mafiamac 2 роки тому +14

    its not working for me

    • @javatrolling390
      @javatrolling390 2 роки тому +1

      same

    • @purplexionroblox
      @purplexionroblox 2 роки тому +2

      @@javatrolling390 how?

    • @TheGrimPhreaker
      @TheGrimPhreaker 2 роки тому +1

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

    • @Trmwt
      @Trmwt Рік тому +1

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

  • @ihssanenedjaoui1444
    @ihssanenedjaoui1444 Рік тому

    thank you a lot

  • @anianu7743
    @anianu7743 2 роки тому

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

  • @SharathLingam
    @SharathLingam 2 роки тому +1

    Thank you so much.

  • @yasuiasianstore7852
    @yasuiasianstore7852 2 роки тому

    so sNice tutorialt like that

  • @pgworldfreightsolution4450
    @pgworldfreightsolution4450 2 роки тому

    TRIGGERED

  • @yvonephilipnicanor
    @yvonephilipnicanor 2 роки тому

    Can you use it to resetup s?

  • @phh235
    @phh235 Рік тому +1

    tks bro

  • @natasadovenkopopular9878
    @natasadovenkopopular9878 Рік тому

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

  • @mydaily21
    @mydaily21 Рік тому

    what the fucntion from format (truetype)?

  • @themasterproller7638
    @themasterproller7638 2 роки тому +1

    Thx u

  • @penguinval7
    @penguinval7 2 роки тому +1

    nice video

  • @XeiDaMoKaFE
    @XeiDaMoKaFE 2 роки тому

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

  • @nadeeshaliyana
    @nadeeshaliyana 2 роки тому

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

  • @dchandrashekhar4680
    @dchandrashekhar4680 9 місяців тому

    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 2 роки тому +1

    life is life la laa - la la la bruh

  • @ingeniouspotatohead1517
    @ingeniouspotatohead1517 2 роки тому

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

  • @abdulrahmankamel6222
    @abdulrahmankamel6222 2 роки тому

    so how can I download the font file?

  • @nawarcode8113
    @nawarcode8113 Рік тому +1

    THANKS!

  • @vansh6759
    @vansh6759 Рік тому

    bro,How can i get of text?

  • @tradinglibrarystation
    @tradinglibrarystation 2 роки тому

    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  2 роки тому

      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.

  • @sathvikmalgikar2842
    @sathvikmalgikar2842 Рік тому

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

  • @vigneshwar71
    @vigneshwar71 Рік тому

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

    • @yntkns6094
      @yntkns6094 5 місяців тому

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

  • @ciyaarahadunidaoffical5474
    @ciyaarahadunidaoffical5474 2 роки тому

    Please can I approach yours

  • @sillybella8762
    @sillybella8762 2 місяці тому

    didnt work for me :(

  • @bond2169
    @bond2169 2 роки тому

    who else is here from nonsense humor

  • @senju31
    @senju31 Рік тому

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

  • @hardinrami8500
    @hardinrami8500 2 роки тому +1

    Thank you!

  • @TraydonDunkheel
    @TraydonDunkheel 2 роки тому +1

    Thanks so much!

  • @sangeetatamori4107
    @sangeetatamori4107 2 місяці тому

    Thank you very much 😊

  • @XBEAST321
    @XBEAST321 2 роки тому +1

    Thanks

  • @czaszkagra
    @czaszkagra 7 місяців тому

    Thanks!!!

  • @aldwenbarte3021
    @aldwenbarte3021 2 роки тому

    Please can I approach yours

  • @priscilabird294
    @priscilabird294 6 місяців тому

    Thank you so much!

  • @aliston_gomes
    @aliston_gomes 11 місяців тому

    Thanks