Add Custom Fonts to Your Websites Using Google Fonts - HTML & CSS Tutorial

In today's video I'll be showing you just how easy it is to include custom fonts in your websites or web applications using Google Fonts. This is a great way to add a professional look to your projects.
Link to Google Fonts:
fonts.google.com/
💜 Join my Discord Server:
/ discord
Support me on Patreon:
/ dcode
Follow me on Twitter:
@dcodeyt
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #css

Пікірлер: 102

  • @mannyc6103
    @mannyc61032 жыл бұрын

    Super useful! I’m currently making a project webpage to show employers in the near future and honestly this helped out a lot, keep it. 👍

  • @BrinleyBlogette
    @BrinleyBlogette8 ай бұрын

    Straight forward and to the point! no back and forth, no wasting people's time friggen around with "possibilities," just exactly what the viewer searched for. Thank you! New sub :)

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

    Simple and clear. Thanks for this! Have just enabled the Karla font on my entire site and it looks so much more professional now.

  • @ThomasKing-iz7vh
    @ThomasKing-iz7vh Жыл бұрын

    Just wanted to say thank you, had been working on a project for awhile, and font's made it look 100% better.

  • @brianlanes4298
    @brianlanes42983 жыл бұрын

    Thanks for the video, i been looking for a tutorial for google fonts for a long time. Thanks again.

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

    You made this so simple! Thank you so much! Because of you, me, my ADHD and I got a little work done today!

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

    Thanks for the help, I was always downloading the font and installing it but you told the actual way!!! Thanks again...😁

  • @nataliewalsh9392
    @nataliewalsh93922 жыл бұрын

    Thanks Dom, it was extremely helpful.

  • @samueltribe2070
    @samueltribe20703 жыл бұрын

    This was really helpful, thanks!

  • @cristofer232010
    @cristofer2320102 жыл бұрын

    This helped! Thanks man, you're the best !

  • @user-gu3hd1fx1j
    @user-gu3hd1fx1j Жыл бұрын

    this helped me so much! thank you so much

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

    thank you for including the detail about font weights!

  • @suyash.01
    @suyash.013 жыл бұрын

    Straight and to the point. thanks.

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

    Thanks! this was very helpful!

  • @francomelamed2501
    @francomelamed25012 жыл бұрын

    Hi bro, thanks a lot, I am having an exam tomorrow about Visual Studio & CSS, and this was very helpful! greetings from Argentina!!

  • @nmg
    @nmg2 жыл бұрын

    You're a life saver my friend. Big up.

  • @nickbitsadze871
    @nickbitsadze8712 жыл бұрын

    Wow. You described just perfectly.

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

    This really helped. Thank you.

  • @aminsec
    @aminsec2 жыл бұрын

    Thankyou dude! easy to understand

  • @med3060
    @med30603 жыл бұрын

    lucid, thank you so much mate !

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

    loved it!!

  • @hydraclue6414
    @hydraclue64142 жыл бұрын

    Thank you so much it was very helpful.

  • @aaronmoroney2066
    @aaronmoroney20662 жыл бұрын

    Thanks mate. Really helpful tutorials! I now type "how to (problem) dcode" into my yt search bar ;)

  • @florisle329
    @florisle3292 жыл бұрын

    Thank You very much!

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

    Thank you, as a CSS noob this really helped =)

  • @sevestiansays9699
    @sevestiansays96992 жыл бұрын

    Thanks a lot dude!!

  • @andrewprosd3472
    @andrewprosd34722 жыл бұрын

    thanks for the handy tip!

  • @sidharthrunwal6833
    @sidharthrunwal68332 жыл бұрын

    great video! thanks

  • @thomasduthie
    @thomasduthie8 ай бұрын

    Thank you!

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

    I learned something new, thanks! Quick question: How will the browser know when to use the italic version of the font?

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

    Thank you so much.

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

    Thank you amigo!

  • @patriciocorvalan1298
    @patriciocorvalan12982 жыл бұрын

    Thanks man!

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

    thanks and love u brother

  • @muhammadhafizh4943
    @muhammadhafizh49433 жыл бұрын

    thankyou so much sir!

  • @soulforthekindheart3766
    @soulforthekindheart37662 жыл бұрын

    very helpful , straight to the point.

  • @dcode-software

    @dcode-software

    2 жыл бұрын

    Awesome, glad it helped you out!

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

    Awesome 👍

  • @noelthakur
    @noelthakur2 жыл бұрын

    Thank you so much! You really helped me!

  • @dcode-software

    @dcode-software

    2 жыл бұрын

    Glad to hear I helped you out, you're welcome 😎

  • @rohankumawat2870
    @rohankumawat28702 жыл бұрын

    i searched a lot... but finally i did it. thank you

  • @dcode-software

    @dcode-software

    2 жыл бұрын

    Very nice 🙂

  • @mahanteshbadiger1642
    @mahanteshbadiger16422 жыл бұрын

    Thank you

  • @thedigitaltourist676
    @thedigitaltourist6762 жыл бұрын

    Thank you so so so so so so so so much

  • @samuelo.francis5964
    @samuelo.francis5964 Жыл бұрын

    Thank you.

  • @mellowsan6164
    @mellowsan61642 жыл бұрын

    thanks brother

  • @vivekanandsahoo5181
    @vivekanandsahoo51813 жыл бұрын

    thanks a lot, buddy.

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

    You're a star

  • @imaymen
    @imaymen2 жыл бұрын

    Thank a lot bro

  • @Famas_v7
    @Famas_v73 жыл бұрын

    thanks good vid

  • @OmPrakash-ot3nr
    @OmPrakash-ot3nr3 жыл бұрын

    Thanks !!!!

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

    Very informative💖💖😇

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

    Thanks

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

    thank u

  • @mehmetaltinsoy525
    @mehmetaltinsoy5252 жыл бұрын

    Thanks Dom.

  • @rudrapratap873
    @rudrapratap8732 жыл бұрын

    Thanku bro

  • @adheeshsood6306
    @adheeshsood63062 жыл бұрын

    Hey which theme is that? that looks really nice

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

    how do i upload my own custom font online to use like this ?

  • @emotions........2222
    @emotions........22223 жыл бұрын

    Thank you so much bro

  • @dcode-software

    @dcode-software

    3 жыл бұрын

    You're very welcome!

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

    thanks

  • @seddeknadhem5638
    @seddeknadhem56382 жыл бұрын

    When i took the link and paste it on my HTML it worked... but when i tried to make it use @import url () in CSS it didn't work and showed me that there're three errors!

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

    helpful

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

    And how tf do u get to that black background part to program these fonts

  • @311zavod
    @311zavod2 жыл бұрын

    Thanks! You helped a lot! By the way, what's the font you're using on VS Code?

  • @dcode-software

    @dcode-software

    2 жыл бұрын

    You're very welcome! The font is called Roboto Mono.

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

    May I know why I followed exactly what you did but "nothing happens " ? I put the links in my chatbot. Thanks

  • @khokho6827
    @khokho68272 жыл бұрын

    So We use impor for CSS files, and Link for HTML files, right?

  • @bruhmoment3731
    @bruhmoment37312 жыл бұрын

    4:19 what if i don't want my h1 to be bold? what if i want my paragraph to be bold?

  • @tropixz2487

    @tropixz2487

    2 жыл бұрын

    is bolded :)

  • @MrRayinsf
    @MrRayinsf2 жыл бұрын

    What if you want the paragraph bold and the heading not bold?

  • @sphinxz_gaming

    @sphinxz_gaming

    2 жыл бұрын

    what do you mean? you mean the paragraph make bold but the head is for the website it links to your main body css

  • @penguin3427
    @penguin34272 жыл бұрын

    good vid

  • @dcode-software

    @dcode-software

    2 жыл бұрын

    Happy to hear you liked it

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

    something is wrong and I dont even get it, google is giving me the exact same link and font family for every font on the webpage, whenever I copy a font link i notice that its exactly the same link as the other fonts

  • @HyperBassYT
    @HyperBassYT2 жыл бұрын

    It didn't work I don't see my font changing :(

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

    WHY DONT I HAVE SELECT THIS STYLE OPTION :((((((((((((((

  • @robertbutcher222
    @robertbutcher2223 жыл бұрын

    is there a way I can add all the styles of a font at once, without having to click "add" X number of times?

  • @Thomas-vd7ez

    @Thomas-vd7ez

    2 жыл бұрын

    exactly what I wanted to know!

  • @eagle_jsj
    @eagle_jsj3 жыл бұрын

    Yeah but for example, how do I incorporate Semi-bold 600 italic into my body and Regular 900 into h1, h2, ?? Thats the broth of the soup.

  • @dcode-software

    @dcode-software

    3 жыл бұрын

    Hey, you can use a semi-bold 600 in your BODY tag, then use regular 900 in your H1, H2 (in your CSS)

  • @anvitpatel1295

    @anvitpatel1295

    Жыл бұрын

    If you get that answer please let me know, I am struggling hard for that. and dcode's reply isnt that helpful

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

    didnt work for me

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

    Can't you just import the entire font family?

  • @arashvincent8519
    @arashvincent85192 жыл бұрын

    you did not explain import method

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

    Off topic, did you say your name was DUMB?

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

    Helpful, but this didn't really show how to use with a .css file. My professor is requiring I use @import and I really don't know how to use it lmao

  • @abodieqwerty4678

    @abodieqwerty4678

    Жыл бұрын

    at 3:34 click on @import

  • @onikatanyamirajpetty3818

    @onikatanyamirajpetty3818

    Жыл бұрын

    @@abodieqwerty4678I figured it out once I got to that point, it just confused me at first. Regardless, thank you.

  • @abodieqwerty4678

    @abodieqwerty4678

    Жыл бұрын

    @@onikatanyamirajpetty3818 makes sense, you're welcome

  • @darybertocanseco9322
    @darybertocanseco93223 жыл бұрын

    .

  • @thengakola6217
    @thengakola62173 жыл бұрын

    feels a little..... slow

  • @drcowan3468
    @drcowan34682 жыл бұрын

    No. You're going to piss users off. Google fonts sites have connectivity issues on a regular basis(regardless of how Google lies about this fact) and when this happens, the page(s) with Google fonts will hang for your potential users/customers. You've been forewarned.

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

    time waster gfys

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

    why you're takin so much time, but not letting us know immediately a simple damn method, bro? Skip to 2:45

  • @codewithmarley
    @codewithmarley2 жыл бұрын

    Dumb????? Is that your name?!?!?

  • @dcode-software

    @dcode-software

    2 жыл бұрын

    My name is DOM 😎

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

    I'm sorry but I heard My name is dumb

  • @__jake.m
    @__jake.m2 жыл бұрын

    Thank you!

  • @patriciama868
    @patriciama8682 жыл бұрын

    Thank you

  • @ibrahemnjr9924
    @ibrahemnjr99242 жыл бұрын

    Thanks