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

Поделиться
HTML-код
  • Опубликовано: 11 янв 2025

Комментарии •

  • @thequnson
    @thequnson 2 года назад +21

    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.

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

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

  • @bianchimena9373
    @bianchimena9373 2 года назад +4

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

  • @kyleclarke4845
    @kyleclarke4845 Год назад +2

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

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

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

  • @kellywauz9615
    @kellywauz9615 Год назад +1

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

  • @paulscott4962
    @paulscott4962 2 года назад +20

    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

  • @TerryKovarik
    @TerryKovarik Год назад +3

    Quick and easy to follow. Nice job!

  • @ANIKETKHAREnullRA
    @ANIKETKHAREnullRA 3 года назад +2

    keep uploading videos like this ! love your content

  • @alkadoHs
    @alkadoHs 2 года назад +1

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

  • @eskomumbalaii766
    @eskomumbalaii766 2 года назад +2

    Installed, everything works, thanks!

  • @NoTimeWaste1
    @NoTimeWaste1 7 месяцев назад

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

  • @smartwork7098
    @smartwork7098 Год назад +1

    Thanks man, it works perfectly even with webpack!

  • @nachobaronetto1625
    @nachobaronetto1625 2 года назад +1

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

  • @Trmwt
    @Trmwt 2 года назад

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

  • @lunar6613
    @lunar6613 2 года назад +2

    So informative, thanks a lot!

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

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

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

  • @bassbeatshome4028
    @bassbeatshome4028 2 года назад +1

    Thank you.. you saved my life 😁💫🤟

  • @huepainting
    @huepainting 2 года назад +1

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

  • @amirbashir5463
    @amirbashir5463 Год назад

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

  • @fercherl6843
    @fercherl6843 2 года назад

    This helped me so much! Perfect tutorial

  • @lucascantarelli8707
    @lucascantarelli8707 2 года назад +1

    simple and clean, ty man!

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

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

  • @debojitbhattacharjee4017
    @debojitbhattacharjee4017 Год назад +1

    Awesome explain bro,thanks

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

    thanks for the video, very helpful and simplicstic.

  • @Denied.
    @Denied. 2 года назад +1

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

  • @barsyasar6675
    @barsyasar6675 2 года назад +1

    very clear explanation

  • @KennethPlaysOfficial
    @KennethPlaysOfficial Год назад +1

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

  • @thankants
    @thankants 2 года назад +1

    Thank you dear from Kerala ❤

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

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

    Straight forward, THank you sir new subscriber here

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

    thanks bro, it was really helpful and a life saver

  • @x_Tonka
    @x_Tonka 2 года назад +1

    very clear, very good, thank you very much

  • @tarekbaarini
    @tarekbaarini 2 года назад +1

    thank you man this was helpfull

  • @rangabharath4253
    @rangabharath4253 3 года назад +1

    Awesome as always 👍

  • @DougRalph-vu1if
    @DougRalph-vu1if 2 года назад

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

  • @ujjwalrustagi8690
    @ujjwalrustagi8690 3 года назад +1

    Thanks. It really helped me❤

  • @rizkys8791
    @rizkys8791 2 года назад +1

    u solve my problem, thanks mate

  • @mohammadreduan6703
    @mohammadreduan6703 2 года назад +1

    Thank for giving very nice video...

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

  • @mubashir9659
    @mubashir9659 Год назад

    thank for the quick help!

  • @ttttddddddnjsbjdk4117
    @ttttddddddnjsbjdk4117 2 года назад +1

    TNice tutorials was easy to follow.

  • @JimmyCrackorn
    @JimmyCrackorn 4 месяца назад

    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.

  • @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 2 года назад +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

  • @StudioThaler
    @StudioThaler 2 года назад

    Thank you. This helped.

  • @chaitanyapaigude8094
    @chaitanyapaigude8094 2 года назад +2

    Thnx pretty easy 😄

  • @txsy-system
    @txsy-system Год назад +1

    Very helpful 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

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

  • @Manga4u585
    @Manga4u585 2 года назад

    thank you so muchhhh
    your videos are rich which content

  • @aadityamittal3588
    @aadityamittal3588 2 года назад

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

  • @Natavicaaa
    @Natavicaaa 2 месяца назад

    El mejor video ! Graaaacias🤓

  • @anianu7743
    @anianu7743 2 года назад

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

  • @mydaily21
    @mydaily21 2 года назад

    what the fucntion from format (truetype)?

  • @NOOB-yt8js
    @NOOB-yt8js 11 месяцев назад +1

    Thank you

  • @yvonephilipnicanor
    @yvonephilipnicanor 2 года назад

    Can you use it to resetup s?

  • @aritra3004
    @aritra3004 3 года назад +1

    Thanks brotha!!

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

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

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

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

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

    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

  • @natasadovenkopopular9878
    @natasadovenkopopular9878 2 года назад

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

  • @nadeeshaliyana
    @nadeeshaliyana 2 года назад

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

  • @johanesalberto6136
    @johanesalberto6136 Год назад +1

    thank you so much bro

  • @abdulrahmankamel6222
    @abdulrahmankamel6222 2 года назад

    so how can I download the font file?

  • @Kunal-yg9fs
    @Kunal-yg9fs 7 месяцев назад

    thanks buddy!!

  • @airpet3870
    @airpet3870 2 года назад

    best luck!

  • @Tapzi
    @Tapzi 3 года назад +1

    Thank you!!

  • @vansh6759
    @vansh6759 2 года назад

    bro,How can i get of text?

  • @sathvikmalgikar2842
    @sathvikmalgikar2842 2 года назад

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

  • @ingeniouspotatohead1517
    @ingeniouspotatohead1517 2 года назад

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

  • @vigneshwar71
    @vigneshwar71 Год назад

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

    • @zkhj1887
      @zkhj1887 7 месяцев назад

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

  • @kanakkury5726
    @kanakkury5726 Год назад

    Many many thanks.

  • @penguinval7
    @penguinval7 2 года назад +1

    nice video

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

  • @ciyaarahadunidaoffical5474
    @ciyaarahadunidaoffical5474 2 года назад

    Please can I approach yours

  • @hammadkhanReact
    @hammadkhanReact Год назад +1

    thankyou bro vamos

  • @yasuiasianstore7852
    @yasuiasianstore7852 2 года назад

    so sNice tutorialt like that

  • @sillybella8762
    @sillybella8762 4 месяца назад

    didnt work for me :(

  • @katiemusgrave2824
    @katiemusgrave2824 Год назад +1

    thank you!!!!

  • @miskcoop4388
    @miskcoop4388 2 года назад +1

    life is life la laa - la la la bruh

  • @ihssanenedjaoui1444
    @ihssanenedjaoui1444 Год назад

    thank you a lot

  • @cheeseandchill
    @cheeseandchill 2 года назад +1

    Thanks

  • @DinoNTT
    @DinoNTT Год назад +1

    thanks

  • @pgworldfreightsolution4450
    @pgworldfreightsolution4450 2 года назад

    TRIGGERED

  • @themasterproller7638
    @themasterproller7638 2 года назад +1

    Thx u

  • @phh235
    @phh235 Год назад +1

    tks bro

  • @bond2169
    @bond2169 2 года назад

    who else is here from nonsense humor

  • @SharathLingam
    @SharathLingam 2 года назад +1

    Thank you so much.

  • @nawarcode8113
    @nawarcode8113 2 года назад +1

    THANKS!

  • @senju31
    @senju31 Год назад

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

  • @sangeetatamori4107
    @sangeetatamori4107 4 месяца назад

    Thank you very much 😊

  • @TraydonDunkheel
    @TraydonDunkheel 2 года назад +1

    Thanks so much!

  • @hardinrami8500
    @hardinrami8500 2 года назад +1

    Thank you!

  • @XBEAST321
    @XBEAST321 2 года назад +1

    Thanks

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

    Thanks!!!

  • @aldwenbarte3021
    @aldwenbarte3021 2 года назад

    Please can I approach yours

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

    Thank you so much!

  • @aliston_gomes
    @aliston_gomes Год назад

    Thanks