Fonts – Web Design Bite-Sized

Fonts – Web Design Bite-Sized

October 5, 2023

Finding the perfect font for a logo can be excruciating. Most design software packages provide hundreds of fonts, but you can spend hours trawling through them, trying to find the perfect font. You then discover that most fonts are actually awful and should never have been allowed to see the light of day.

Good and decent fonts are certainly few and far between, so we are keeping our own record here of the best ones that we come across so that you can use them in your own projects.

Americana Std Roman

This is a free font that you can download from sites such as Fontsgeek. If you don’t have your own software that uses fonts installed on your computer, such as Photoshop, then you can access it through software such as Pitsart.com. Note that you will need a paid subscription to access this font.

Lemon Milk Pro

You can get this font as a free download from ifonts.xyz. Alternatively, this can be accessed for free through Pitsart.com.

Gilroy

This is a sans serif font that looks a little like Poppins. You can download for free from fontsgeek.com.

This font also comes as standard with a canva.com paid subscription.

Limelight Font

This is a great 1920s throwback font. You can access Limelight through Google fonts, which is great for web designers.

You can also download it for free from Dafontfree.io and other free font download websites.

Stay tuned – more to follow…

Adding Google Fonts to Your Website

To add a google font to your site, you will need to add the following code in the header:
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Tangerine”>

Replace Tangerine with the font of your choice – Raleway, Poppins, Lato, Montserrat – whichever takes your fancy.

You will then need to specify this font in your CSS or inline in your html.

To add it in your stylesheet:

.css-selector {
font-family: ‘Font Name‘, serif;
}

To add it inline:

<div style=”font-family: ‘Font Name‘, serif;”>Your text</div>

For example:

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

This gives you much more freedom with the fonts that you can use. Please note that they will need to be viewed on a modern browser to display correctly.