Finding the perfect web font for your website doesn’t require a design background. But, there are some things you should know. Not all web fonts are the same and there are different uses for each one. Once you find the perfect web font for your site, everything comes together.
What is best web font for a website? Adobe Fonts and Google Fonts are often the best choice for web fonts. They have a high standard for resolution, are delivered seamlessly across the web, and are well supported. Adobe Fonts has more selection for a monthly fee and Google Fonts provide the best free typeface sets available.
The goal of picking a great web font is to marry your brand style with your web font choice. Our aim is to help you pick a great web font while staying true to your brand. You CAN find great free fonts and you CAN pay for amazingly unique fonts. By the end of this article, you’ll have all the tools required to create amazing content with wonderful fonts.
What are web fonts and why are they important?
Web fonts are digital fonts that are loaded with a web page to display the font exactly as the site designer intended. Believe it or not, there was a time when you only had a few fonts to pick from.
We call this time the dark ages: 1990’s. You could pick from a group of fonts called “web safe fonts.” You can thank Microsoft for these astonishing fonts. 🤨🤨
Web-safe fonts were put in place so that all browsers could safely display web pages while getting the fonts correct. Microsoft started a project in 1996 called core fonts for the web. If you are older than 30, you probably remember when we only had a hand full of fonts to pick from:
- Andale Mono
- Arial
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
- Webdings
Microsoft had a really simple goal: create a set of fonts to increase the likelihood that the correct font would be displayed. Back before web fonts, if a computer didn’t have a specific font on the hard drive, it would select a font on your behalf.
This typically made the website look terrible. If you chose a sweet old-english font for your Zelda fan site and it wasn’t a core-font, the browser might have replaced it with something less snazzy in its place. And no one, I mean no one, wants Times New Roman on a Zelda fan site. That’s an 80’s gaming criminal offense.
To rectify this unfortunate series of font replacements, CSS2 (web design language) was born and the world of Web Fonts began. Woohoo!
Webpages could finally send the web data AND the font file. All is right in the world!
Websites finally looked exactly as you designed them—for better or worse. Designers everywhere rejoiced!
To say that this is a big deal is an understatement. Web fonts load sites faster, give creative flexibility to designers, improve font resolutions, and improve overall site performance.
These factors can potentially improve search engine rankings as well. Nothing is worse for your site than having a slow site.
Web fonts also work really well with your websites style sheet (css code). Don’t get too caught up in the technical jargon, but it’s important to know that you can actually assign more than one font to your website text. You can set a font “hierarchy” which tells the web browser what to install in case it can’t load the file you really want.
You might set your font preference to Roboto, but your back up plan might be Helvetica Neue. And if a browser can’t display those two fonts, you might set a third backup font to be San Fransisco.
The world is your oyster. There is really no excuse not to have a beautiful site with gorgeous fonts.
What are the best web fonts to choose for a website?
The best web font is a subjective question, so we will try to use an objective answer. We really like Sans Serif fonts because they are clean and clear. Sans means “without” and serif’s are those little small lines at the end of letters that add flair. Think of old english calligraphy—lot’s of serif.
When we are reading on the web, you have to keep in mind that your readers will likely view content on different devices. One might be scrolling through your content on their 60” tv while another might be viewing your content on a 4” phone (those still exist right?).
This is why we always recommend using Sans Serif fonts for the bulk of your content (blogs, paragraphs, etc). Sans serif is clean and readable. It also scales up nicely and sizes down beautifully. When you add serif’s to your font, they become more challenging for your reader at smaller font sizes.
Top Free Sans Serif Fonts (Google Fonts):
- Lato
- Open Sans
- Roboto
- Exo
- Source Sans Pro
- Ubuntu
Top Paid Sans Serif Fonts (thank you for the list Typewolf)
- Apercu
- Futura
- Proxima Nova
- Avenir
- Brandon Grotesque
- GT America
Any of these fonts are safe to use and will display beautifully on your site. You literally can’t go wrong by selecting one of these. And the best part is many of these come in different font weights (slim, light, medium, bold, extra bold, italic). So really, each font is like having multiple fonts that pair well together.
If your site is new, you are definitely best to choose a Google Font. They’re free. Now you can save your money for something else like better hosting or a sweet logo.
Where is the best place to find a web font?
Finding the right web font is like catching a sneeze—it just feels so good. You’ve picked out your colors, your logo is looking 🔥🔥🔥🔥🔥, and now you need to find the perfect font to tie everything together.
Where can I find web the perfect web font for my website?
There are quite a few places to find the perfect font. Let’s start with the best of the best and work our way down to the free options.
Adobe Fonts. Adobe fonts are the best of the best. They’ve bought out a majority of the nicer font collections on the web and have one of the biggest repository of amazing fonts (thousands of fonts). Adobe has some famous fonts in their collection like Proxima Nova, Futura, Acumin, Cortado, Orpheus, Benton Sans, Gill Sans, Freight Display, and others.
There is quite literally nothing you won’t be able to design with beautiful font types. Everything from headlines to mobile app design is covered here. Adobe also does a wonderful job on their website of helping you find the perfect font with categorization and project management. Monopolization at its finest.
And while I’d say, “Sure, take out your credit card and buy Adobe Fonts now,” I’d be remiss not to mention that a monthly subscription is required. #notforcheappeople
Deal breaker? For some it definitely is. You’ll need at least the $20 monthly plan to get the fonts. And for most people, this isn’t going to work.
So what’s a blogger to do? We’ve got you covered. Keep reading.
MyFonts. Myfonts.com is an awesome source for fonts. It’s not as big of a commitment as Adobe Fonts (monthly subscription) and it’s a place that you are guaranteed to find high quality fonts. Most of the fonts are around $35 and you can use them anyway that you’d like.
Buying a great font can really make your logo, site headers, or body paragraphs come to life. There is nothing better than adding a little sizzle to the frying pan.
We know, it’s not free, but it’s cheaper than Adobe. And while there are fonts that sell for $5,000 on here (crazy…), most are very affordable.
Google fonts. Let the free-font games begin!!! The Google Fonts collection is one amazing set of fonts. Designers have raved about Google Fonts for a long time because they are gorgeous and come with plenty of options.
Did I mention they are free? Shahhh…they are!
For most website owners that don’t require a crazy custom font, Google Fonts probably has everything you’ve ever wanted. There are currently 916 free fonts from the Google Font library. At the time of you reading this, there are probably even more.
There is no way you should run out of creativity almost a thousand fonts to choose from. And, nearly all of the Google Fonts will display perfectly on web browsers with high resolution.
In fact, this site uses a Google font called Poppins. Go ahead, steal it. It’s beautiful and reads extremely well. Font snobs—shut it!
If you are looking for some fresh font ideas and want to select a font that reads well, I’d recommend the following Google Fonts.
- Poppins
- Montserrat
- Josefin Sans
- Playfair Display
- Oleo Script
- Caveat
- Roboto
- Lora
- Source Sans
- Karla
- Rubik
- Oswald
You can download the entire Google Font collection here. The best part is most of the fonts come in different weights like light, thin, regular, medium, bold, italic, etc. Not to mention the Google design team is picking the fonts, so it’s pretty hard to choose a bad font.
If you are asking my opinion, I’d go with Google Fonts 9 out of 10 times.
More Free fonts. I told you earlier we’d talk free fonts, and if Google Fonts aren’t enough, I’ve got more Fonts coming your way.
This section is a proceed at your own risk. You’ll be downloading fonts, so make sure to do your own due diligence.
To be fair, with Google Fonts, I don’t think you’ll need anything else. But I understand if you need that extra something for a logo or graphic design.
The following font collections are from websites that are popular for downloading free fonts.
- Font Squirrel – Font Squirrel has been around a long time. They have a HUGE collection of fonts. The quality is all over the place, but there are some pretty cool fonts on there. I’ve personally used Font Squirrel in the past for logo and graphic work.
- FontSpace – FontSpace is another great site. It probably has the biggest font collection on the web with over 50,000 fonts. The cool thing about FontSpace is that designers upload their custom fonts here. They are constantly adding new fonts. If you choose a newly uploaded font today, chances are, very few people will have ever used your font. The font below was uploaded today.
- DaFont – DaFont is a great site for free fonts when your projects are small and personal based. DaFont has some really creative fonts that are both unique and quirky. There are some fonts here that allow for licensed commercial use, but most are personal use only. Most of the fonts require you to contact the font owner who can give you instructions for commercial use license. For most bloggers, this isn’t necessary. If you need the commercial license and the author gives you a ridiculous price, just walk away and keep searching.
How do you choose complimentary web fonts (pairing)?
Choosing a great web font for your website doesn’t require a design background, but it does require thoughtful decisions. You want to make sure you are choosing something that represents your brand well and performs well on screen.
But what really sets a website apart is Font Pairing.
What is font pairing? Font pairing is when two or more fonts occupy the same design and work harmoniously together. In other words, some fonts look REALLY GOOD together. And when you get it right with your brand, everything comes together.
If food were fonts, peanut butter and jelly would be the ultimate font pair.
For the sake of this article, we won’t go into the technicalities of font pairing, but we can give you some rules-of-thumb to work with.
Eccentric + Tame. Eccentric fonts work really well with tame fonts. In this example, I am using Luckiest Guy (eccentric font) and Source Sans Pro (tame font). You rarely want two really crazy fonts in the same design. The eccentric font is typically a focal point for interest and the tame font is a source of calmness.
This combination appear in nature often. Think waterfalls and the calming pool of water below them or the wild swaying tree tops and the calm and steady tree trunks below them.
Big then small. Most graphic designs have larger fonts followed by smaller fonts. Think newspapers, webpages, and postcards. All of these designs begin with large fonts at the top and smaller fonts for the body text. This might seem obvious, but often times we see fonts that are too close in size. You need proper separation.
Take a look at the two images below. The first image has fonts that are too close in size. They are visually hard for the eye to comfortably read. The second image has a much larger font size difference and there is a natural harmony. So much better.
Theme. Branding is really important. You want to make sure that your font reflects your brand image. I’ve seen some really funky font choices destroy a great website brand.
If your business is refined and high ticket, then your audience will expect an elegant, simple font. You’d be best choosing a Sans Serif here or a classic serif like Garamond.
If your business is playful and fun, then you can get away with more interesting fonts.
Branding is very important and you should always consider the context of your business and the connection to your font. Words speak volumes and fonts display words.
Are there any helpful web font tools?
There are a lot of great web font tools to help you select that perfect font. I believe with the information in the blog, you’ll have everything you need. However, for the curious and design-centric reader, the following resources are amazing.
Typewolf. I’m a huge fan of Typewolf. It’s a site built by Jeremiah Shoaf. Jeremiah is an amazing designer with an enclyopediac understanding of fonts. He reviews the best of the best fonts and gives great recommendations for font choices. I’m a Typeworf fan-boy. That site is awesome.
Fontjoy. This is one awesome tool. Fontjoy helps you to pair great fonts together. You can keep hitting the “Generate” button until you find a font pair you like. This is an awesome tool for people without font knowledge. You don’t need any font knowledge to use this tool. Have fun.
Related Questions
How do I add Google Fonts to my WordPress Website? The easiest method is to use a theme that pulls in Google Fonts automatically. We really like Astra Theme for this reason. You’ll find all your Google Font favorites in the customizer panel.
You can also use a plugin to bring in Google Fonts. The Easy Google Fonts plugin is an easy way to add custom fonts to your WordPress theme without the need to code a single line.
How do I change the font for my WordPress site? To change the web font in your WordPress, you’ll want to complete the following steps:
- Login into you WordPress
- Click on “Appearance” on the side menu
- Select “Customize”
- In the customizer, you’ll click “Typography”
- Set your web fonts for the different areas of your website.
At step 5, you’ll notice that you have multiple areas you can set the font for. Your Base Typography are your default fonts. If you don’t assign different fonts to different areas of your site (header, buttons, blog, etc), then they will inherit the base typography.
This is the place to decide if you want a different font for your blog pages than your site header (headline, menu, etc) or if you want your foot to have a different font than the buttons on your site.
