Google Fonts Tutorial: Add custom fonts to your website



Want to use Web Fonts to make your pages look better? Google Fonts is your best option.

This tutorial covers how you can use the website to embed fonts in any website you build.

🔗Code GIST: https://gist.github.com/prof3ssorSt3v3/be4984e9b3c6f4bd6d43d2e80100f6db

🔗Google Fonts: https://fonts.google.com/

🔗Font Matching site: https://meowni.ca/font-style-matcher/

Tutorial by Steve Griffith. Check out his YouTube channel: https://www.youtube.com/channel/UCTBGXCJHORQjivtgtMsmkAQ

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 20 Comments

  1. Ibrahim Mudassar

    how do you get your webpage to automatically change based on your code?

  2. pUArro

    Did I heard a pure British accent??? isn`t` it???

  3. Eron Harden

    I want to know if I've downloaded the fonts, then how'd I deal with the font-weights?

  4. Trisch Varela

    great stuff…

    could you dial it down a bit. wish i were as code savvy as you.
    so using the method you can edit fonts on a google site? how do i embed the code? could you make a video about changing fonts on google sites, like a tutorial for dummies?

    Thanks

  5. Krop

    Thanks! I was creating a page that will be seen on both desktop and mobile. However, on mobile all the fonts were missing. I didn't really want to create a separate CSS stylesheet – I'm not a webdev and wanted to keep it super simple. The Import part was very useful. The video was pitched at just the right level. Great job!

  6. Music and Game

    Weird, when i use Font-family Custom font is not work, but google upload link and add to my css file, it's work, anyone know why??

  7. Jashank Bhatia

    Can anyone help me how should I upload/add adobe fonts with there tag and CSS to Shopify?

  8. Yogesh Soni

    hey developer, you purchased macos but using Google Fonts.

  9. Milan Pavlovic

    No more + signes on font families. No idea how to select entire font family now. All I can do is select family members – styles, one by one

  10. Ae Bek

    can you add the font-weight from your css that you don't selected from the google font website ,does it work?
    good explanation I like the font-matching website .

Leave a Reply