You wouldn’t wear clothes that don’t suit your style, so why write in Times New Roman when your brand is more Helvetica? Whether you have a chic online store or a local restaurant, it is important to pick the font that matches your brand. When you create a website, the typeface you choose sets the stage for your visitors and gives them a feel for your unique style.
The Wix Editor already offers tons of free customization options including 96 outstanding fonts, images, video backgrounds, and so much more! Now, we are happy to announce that you can upload your own best website fonts to the Wix Editor easily. With the ability to add any font you want, in any language, the possibilities are endless.
Here’s how to add your personal fonts when you're learning how to make a website, and some tips and practices from our design pros to go with it.
How to Upload Your Own Fonts to the Wix Editor
See a font you want for your blog, business, or portfolio? Not a problem, follow these easy steps to upload and implement your favorite fonts onto your site. Have a few websites that will look great in your new typography? Excellent, now your fonts are accessible from all sites in your account! Give it a try!
To upload your own fonts:
Click My Uploads on the left side of the Editor
Click Fonts
Click Upload Fonts and browse your computer for the font you want to upload
Click Done once the font has uploaded
*Important: Make sure you have the rights to use the fonts you upload. You can only upload fonts up to 1.5MB.
To use your own uploaded fonts:
Click the text element
Click Edit Text
Click the Fonts drop-down menu
Select your uploaded font under My Fonts
With all the options of beautiful fonts at your fingertips from sites like: DaFont, Google Fonts, and 1001 Free Fonts it can be hard to make a decision. The key is not to get overwhelmed and follow this guide when picking fonts that work best for you.
How to Choose the Font Family that Fits the Tone of Your Site
It is important to keep your audience in mind. Your business and brand have a personality, this should be conveyed in your font types and colors. This will help you decide whether to choose serif, sans serif or script. For example, it’s a good idea to use serif for a lengthy text, while sans serifs are suggested for captions, headings, and charts.
Let’s start with a breakdown of the three main font families: Serif, Sans Serif and Script.
Serif fonts have little decorative trimmings on the edges of the letters; like Times New Roman or Baskerville. This family of fonts generally has a classic, more elegant look and is widely identified with “old-school” typeface. Making them great for print, such as: newspapers, books and magazines but they are not as easy to read online.
Sans serifs, on the other hand, are fonts that do not have these decorations at the edges. They are classified as a modern and cleaner typeface, like Arial and Verdana. They are generally the standard for digital and web design because they are considered to be preferable for reading online.
Last but not least, Script fonts are a more ornate typeface. They are extremely cute and are a great embellishment, but are harder to read. They are not recommended for long text or call to action statements.
The Golden Rule: Three’s a Crowd
Beautiful fonts are essential for a stunning design, but just like colors can be distracting, so to can font types. It’s best to limit yourself to two fonts, but if you’re feeling ambitious three is the maximum. Before you think we are out of our minds, just consider all the possibilities you can create utilizing two fonts. If you use more than three fonts you risk the possibility of overwhelming your readers and creating a design catastrophe.
How to Make Your Fonts Serve Your UX
UX (user experience) is where design meets function. Basically, it’s the concept that while websites should be beautiful, they should also be user-friendly and easy to navigate.
Pro design tip: use your fonts according to your brand’s needs but keep in mind readability. What do we mean by this? Every font you utilize should have some thought behind it. If you want to put emphasis on a header it is best to increase the font size, while smaller type is great for long bodies of text. The potential doesn’t stop there, try a hand at placement on the page. If that isn’t enough you can also work with the composition of the fonts. Just be sure your content is legible and that the style compliments your overall design!
To mix or not to mix? That’s the question!
If you’re feeling limited by only using two different fonts, play around with the contrast between bold and thin, italics, and of course, uppercase and lowercase. Spacing is also a great trick to use when wanting to accent certain words.
Now comes the fun part! Mixing all the options of serif and sans serif, bold and thin. Put some thought into your combos and experiment with what works best for you. Make sure your fonts flatter each other rather than detract from one another. If you’re feeling a bit overwhelmed, here’s a how to choose the best fonts for websites.
The three website templates below are great examples of how to mix typefaces for the web. They represent different approaches to typography use. Which one do you like best?
This template is a great example of using a script font to accent certain elements giving an ultra stylized feel, but sticks to serif for the main texts:
This website template for architecture is all about being fluid and modern. It features one sans serif font to really emphasize these elements.
This beautiful wedding template plays with caps and lowercase letters to highlight certain elements of the design without making the viewer overwhelmed.
