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.
Disclaimer:

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):

Font_HTML

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

Font_CSS

Here’s what it looks like:

Pairing Google Fonts using FontPair.co

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s