Tech Tuesday: Web Fonts

To learn more about Web Design, I’m:

  • Completing the Udemy course “Build Modern Responsive Website with HTML, CSS3 & Bootstrap” by Irfan Dayan. ($10 – a steal!)
  • Continuing to practice my skills using the Brackets code editor.
  • Playing around on the Lrn app whenever I have a free moment.
  • Listening to the Code Newbie podcast.

These are not affiliate links and I was not compensated for citing these resources. My takeaways are also not comprehensive of the resources I share. If you like what you read, please support the creator.

Source: Font Squirrel

Web Fonts

Having the right font (and pairing of fonts) is not the most important part of web design, but it’s certainly part of it. The wrong font can impact readability and overall appeal of your site.

I’m so enamored by people who design fonts – it is truly an art form that I cannot wrap my head around. Luckily, there are (seemingly) MILLIONS of fonts available on the web (and many for FREE)! However, not all fonts are browser friendly…

Here are some resources I’ve applied to my projects:

Google Fonts gives you a ton of free fonts that are likely to work on multiple browsers.

I chose Pontano Sans and Lato for my “First Website” project (which serves solely as a playground at this point).

Google Fonts

What’s insane is that it also gives you the HTML and CSS code – could not be easier! I copied the HTML code and pasted it into my index.html file (using the comments recommended in Dayan’s course):


Then, I copied and pasted the CSS code into my style.css file:


Here’s what it looks like:

Pairing Google Fonts using

I played around with this a little. I definitely wanted to use Lato, but there were only a few pairings offered with that font. So, I ended up playing around with different pairings for a few minutes, but the site could still be a helpful tool if you’re looking for pairs quickly.

New Skills Learned: Adding fonts via Google Fonts


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s