Both Weebly default fonts and Google Fonts provide a huge range of free fonts for you to use on your site. From classic to modern, to script and decorative, the amount of options can be overwhelming. To keep things simple, don't worry about diving too deeply into typographic design philosophy (yes, it's a thing that exists). Instead, focus on these three key principles for picking your fonts.
1. Know your purpose
Good typographers have a strong preference for function over form. For example, if you're selecting a font for your paragraph text, you'll want to choose something that's very easy to read. If you're website has a heavy content-focus, then make sure your font doesn't cause distraction.
Typographers speak of this in terms of legibility and readability. Legibility refers to how easy it is to tell one letter from another. Readability then is a byproduct of a font being legible. It turns out that the fonts that are easiest to read are the ones that are pretty bland; consider the kinds of fonts they use in children's books. If you don't have to think to figure out what letter is being displayed, the font succeeds in legibility.
If you're asking your site visitors to read a big chunk of text, taxing them with deciphering highly decorative, artistic fonts, is not ideal. However, if you're using a font for call-outs or headlines, you may want to select something with a bit more flair to draw the eye in. And finally, if your website is image-heavy, you may want to select fonts that won't compete for a visitor's attention.
2. Be discerning
I'm sure you agonized for weeks over your business name, right? So why are you making spur of the moment branding decisions that are as huge as typography? Slow down and take your time. It's important to get this right!
The first step should be to take a look at your design inspirations and your competition. You want to be relevant in your niche, but you don't want to blend in with every other competitor site out there. The world probably doesn't need another daycare provider's website done up in Comic Sans, for example, nor does it need another massage therapist or yoga studio using Papyrus. There are plenty of fonts out there that let you emulate those same feelings, without falling into cliche.
To generalize things, fonts (and the feelings they evoke) tend to fall into these categories:
- Serif: Times New Roman is the classic example of a serif font. These are the fonts newspapers and print magazines typically use because they're so readable. They're thought of as classic and timeless at best, but evoke sentiments of “old fashioned" at worst.
- Sans Serif: Arial, Verdana and Helvetica are the fonts we often think of to exemplify sans serif. These fonts are devoid of decoration and are viewed as modern and trendy. They may also feel cold though.
- Script: Script fonts are handwritten, cursive calligraphy. They may also encompass handwritten print fonts as well . These fonts are trickier to read, so use sparingly. That said, they imply class, sophistication, elegance and femininity.
- Display: Or decorative. These are the art fonts mentioned above. Again, use sparingly at most. Typically not legible or readable, but fun for novelty sake. Favorite examples? Llama font.
When you're choosing fonts for your website, it's important to consider the brand character. Which fonts exemplify that? Start with a typeface category and narrow your options from there.
3. When in doubt, go for contrast...but in moderation
One cheap trick web designers employ when choosing fonts is to pair contrasting test header typefaces with paragraph or body fonts. What this means is you might use Georgia or Perpetua for your blog post titles, but the body text is displayed in Helvetica. This makes it easy for readers to scan your content and find the information they're looking for.
Because too many different font faces can distract your visitor and detract from your content, it's best practice to choose no more than three fonts, and make liberal use of font weights (bolder fonts = weightier fonts) within your selections.
But you still want to reel your choices in. As far as font selection goes, it's always best to err on the side of convention. Picking free fonts that are too wacky may make your website look amateurish. Typography pros know you need to find a font pair that has some element of harmony together—for example, lighter strokes (or bolder lines).
Font pairing resources
The default list of Weebly fonts is extensive and can provide you with plenty of opportunity to easily try on different font combinations directly from the Editor. If you choose to try Google Fonts or just want inspiration to apply back into fonts provided in the Editor, 100daysoffonts.com features gorgeous designer-selected Google Font pairings you can use on your website. You'll also want to check out fontpair.co, where you can browse by font type to find the best picks for your site.
Picking the best font can take a few tries! But it's also a lot of fun. Putting thought into finding your perfect type is well worth the effort. Switching fonts after you've already printed your business cards, or flyers for a trade show, can confuse your site visitors who expect a cohesive and professional brand experience. Start out on the right foot by choosing your typography like a pro. Your future self will appreciate your due diligence.