Web Fonts, Rounded Corners and Rounded Images

Most times, the default fonts on the user’s device will not suffice. You may not like the feel of those, or want something different.

It appears we can do so with web fonts!

We will continue the project from where we stopped in the previous lesson.

Introducing Web Fonts

There are lots of web font providers out there. For the sake of our project, Google font will do!

The Google font catalogue has well over 800 fonts! What more do you need?

The web font we will introduce into the project is called, Montserrat.

You may take a look at it here

Select the font from the Google catalogue, and you get to see the “how-to” include this font in your project widget.

Let’s go ahead and include the font.

Just so we have a base to measure the impact of the font, here’s the current state of the project:

How to Include the Web Font

Add this to the head of the html document:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

This is a link to the Montserrat font stylesheet

Finally, use the CSS below to specify the font families:

font-family: 'Montserrat', sans-serif;

Here’s how it looks on our project:

Now, the project looks very different. The power of type (aka font)

Rounded Images and Corners

Here is the curerent state of the project, without the red ...