Google Fonts for Web Developers: Add Custom Fonts to your Website!
Are you amazed by the incredible variety of beautiful fonts you find all over the web? Learn how you can incorporate them into your own websites with Google Fonts!
✅ Our Project:
You’ll learn how you can customize this text using Google Fonts! Are you ready? Let’s begin! 👍
👋 Meet the Google Fonts Website
First you must go to Google Fonts. You will see a wide variety to choose from.
✏️ Write your Custom Text
You can type your custom text into a specific box to see what that font looks like and customize it! 👍
💡 Note: If you click “Apply to All Fonts” this custom text will be updated and displayed in all the previews.
🔎 Filters
And you can filter fonts by categories, thickness, width and much more with this panel:
✔️ Select your Font(s)
When you find a font that want to incorporate into your website, you can select it by clicking the + button.
💡 Note: This small menu will pop up at the bottom of the screen. You can select more fonts and they will be added as well.
➕ Add Custom Font(s) to your Website
If you click on the pop up menu at the bottom of the screen, you will see this:
Steps
- Copy/paste the
<link>tag displayed in the “Embed Font” section into your HTML<head>tag. - Then, on your
CSSstylesheet add the line displayed in the “Specify in CSS” section to the class or selector that corresponds to your text.
This is the basic structure for this CSS attribute:
font-family: '<custom_font_you_selected>', <fallback_font>💡 Note: The second font is a fallback default font that will be displayed in case the custom font doesn’t load correctly.
👀 Now in Codepen!
This is what our text looks like after adding Google Fonts. 😃 Feel free to browse through the pen and check the HTML, CSS and options.
In CodePen, the <link> tag is added in Settings > HTML > Stuff for <head>.
👏 Great Job!
Now you can customize the fonts in your website! 😃 🎆 👍
If you found this article helpful, your claps are really appreciated ❤️
I would love to read your comments and thoughts.
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
