The subject of fonts is not for the fainthearted. 

How many hours have we all spent searching for potential fonts, deliberating whether they actually complement or detract from our design, only to sit grinding our teeth while clients insist on using Helvetika or Impact rather than our own suggestions? 

I suppose that it’s because fonts are so fickle by nature that we all have this love/hate relationship with them. Fonts can indeed make or break a design. This is why so many designers and web builders prefer to avoid the subject altogether. In fact, there is no shortage of professionals who have done wonders armed with nothing but the same dozen, or so, fonts throughout their career.

We wanted to begin the new decade with a bold step, and choosing fonts sounded like just the type of ambitious subject we wanted to tackle. 

Our goal has always been to show practical applications of the advice, best practices, and tips that we’ve shared. Taking this approach a step further is another ambition that we’ve had for a while. The recent launch of Elementor’s Showcase Madness offered us the opportunity to bring the recent real-life experience and insight, of professionals in their field, to our community.

Learn How To Choose the Best Font Combinations for Your Website

How Professional Web Designers Choose Fonts

Lead designer, Hadas Golzaker, was tasked with finding a font to compliment Eli Yurkovsky’s design for the Showcase Madness page. Yurkovsky’s design deliberately draws upon the work of Dutch abstract artist Piet Mondrian. Some of us are aware of the availability of a font that also draws on the style of this specific artist; a font aptly named ‘Mondrian’. Yet most of us are experienced enough to know that the result of using this font would be the definition of tacky.

01_Mondiran_Font_Monday-Masterclass

It’s one thing when you’re faced with the daunting task of finding the right font for a published work that would be seen by millions. It’s a whole other ball game when this page is also aimed at contemporary professional designers. 

This only made the notion of an interview with Golzaker more exciting. If only to learn firsthand from actual experience, and gain practical insight into the process and workflow that he used. 

Monday Masterclass: For me, and I’m sure for many others, fonts are a bit of a weakness. It’s like going into an ice cream parlor, and you can only choose one, and so it has to be the best. So you’ve got a design. Where do you start thinking about the font? Where does it start to enter the design process?

Hadas Golzaker: Okay, so this year we decided to go with a Mondrian theme. The abstract (art) that he is so famous for. And so we decided to go with abstract shapes. I started looking for a font that kind of looks like the shapes that we already have. You can see the circles, you can see the squares and triangles. So I searched for something that had these pointed sharp angles or curves, like you can see (for example in the letter) D here, or (in the letters) S, that continued the idea that we were going with. That was the main point. 

I started looking for something that (complemented) the Mondrian theme. I had tons of fonts that I’d picked. I think there were like 50. And then I started a process of elimination …looking at the shapes, the curves, the weight, the space between the lines, and whether or not it is readable.

Then I decided on one font, Aliment, and this is the result.

The Importance of Readability When Selecting a Font

MM: When you’re dealing with many people around the world, not everyone is a native English speaker. You have to be careful with fonts that may look nice, but they’re not as readable for most people. Do you have trouble with that sometimes?

HG: Yes, I have. Actually, the way that I deal with this is to have a few people, some of them native speakers, some not, and have them read it. If they can all read the font, it’s fine.

When to Deal With Fonts in the Design Workflow

MM: Where do you start dealing with the font, when do you start working with it in the design? Do you start dealing with it only once you’ve had a wireframe or sketch completed? 

HG: Actually it goes hand-in-hand with the design. I start with an idea. This year, it was the Mondrian theme, and then we started putting a mood board together. Just compiling images, text, whatever connects you to the idea. Then start searching for the line that you want to build.

In this case, the basic line of our wireframe was designed to showcase websites. We knew that we would have text and headlines. With our wireframe set, we work together with our mood-board to flesh everything out and begin filling in the sections and details.

Using a Mood-Board to Help Decide on Fonts for Your Design

MM: What if you have a very short schedule. Do you always use a mood-board? 

HG: Always. I think it’s a basic necessity for design. If you want something to be really inspiring, if you want to create something original, and not copy something you’ve already seen — Yes, mood board is a really easy and good way to start, because then you get tons of ideas just from the images or text, or even just some doodles that you’ve sketched.

MM: What do you use to make these mood boards? 

HG: You could use Pinterest, Dribbble, even Google. Google Images is perfect for it. Behance is a good place for it. But also the world around us, just look around, see places, look for images. Even Instagram will be a good idea for that.

You can just put everything in a folder, or organize it in a PowerPoint file, whatever as long as it’s easy to get to and comfortable to use. 

How to Upload Your Fonts to Your WordPress Website

Once you’ve decided on the font you want, and it looks great with your designs, wireframe or sketch, the next step is to upload it to WordPress, using Elementor.

  1. On the WordPress dashboard, hover over the Elementor tab, and in the submenu, select Custom Fonts.
  2. In the Custom Fonts section, click on Add New.
  3. In the New Custom Font section, give your font family a name, then click on Add Font Variation. This opens a new dialogue box with a list of various font file types that you might be familiar with. Next to each file type, there’s an explanation of what the abbreviated name means and where this file type is commonly used. 

We recommend that you use this to load more than one file type of the same font. Several would be even better. 

This is because visitors could be using any one of a number of browsers, each one preferring to use one file-type rather than another. Having multiple file types helps to ensure that users will always see the font you want them to see, the way you wanted them to see it. 

          3. Upload a File of the font that you want to use and then do the same thing with other file types of the same font. 

          4. Now go to the top of this dialogue box and select the Weight of the font and the Style. 

Notice that there is an example of what your text might look like using this variation. 

          5. Keep adding variations until we’ve got all the variations of the fonts we need for our site, then click Publish. 

Now, whenever you click on Typography (usually in the widget editor panel under the Style tab), you will see your custom fonts appearing at the top of the list, ready for us to use wherever you would like to. 

As you know, you can also customize a font on a micro level, as every widget still has the standard Elementor typography options of Font Color, Family, Size, Weight, Transform, Style, Decoration, Line-Height and Letter Spacing. 

Why Use the Font Variations?

MM: You’re able to create variations in the Custom Fonts settings, but you’re also able to change those variations again, once you’re in the widget’s settings in the Elementor editor. Why would you not just upload the font as it is, and make the changes in the widget editor under the typography settings? What do you get from installing them as variations? 

HG: It’s that Elementor works, to correspond with the way that Google reads content on WordPress websites. You could have content in a Heading 1, or Heading 2 level, and without setting the fonts as variations, Google is likely to change things like the weight as it sees fit. This way you have control, and the font stays the way that you want it seen rather than the way that Google wants it.

Where to Search for Reliable Fonts

MM: Do you rely on certain fonts? Where do you get your fonts? 

HG: I’m going to recommend that you first Google Fonts or Adobe Fonts (Typekit) because these are approved fonts that typographers have vetted and approved. I will always search these libraries first thing because I know that they are good and reliable, and there won’t be any trouble with them on different browsers or the platforms that we use. I can be sure that weight will be fine, and it will perform well. 

Yes, there are all kinds of websites where you can choose marvelous fonts. Sites like Font Squirrel, 1001 Fonts. Eli (Yurkovsky) recommends DaFont for example. However, you will need to check the font’s performance. When a company like Adobe or Google has already done that for you, it makes it easier for you. You just pick it and place it, that’s it.

How to Add Adobe Fonts (Typekit) to Your WordPress Website

Adobe Fonts (previously known as Adobe Typekit) is a cloud feature that stores all of the fonts that we use throughout the Adobe’s Creative Cloud, whether on Illustrator, PhotoShop, Sketch, etc. In Adobe Fonts you assign the fonts that you choose to the projects that you plan to use them for. 

To install your Adobe Fonts on WordPress, you will need to get the project number that the fonts are assigned to. You can find this on your Adobe Fonts project page, under Adobe Project ID.

On the WordPress Dashboard, go to the Elementor tab, select Settings, then Integrations. Scroll down the page to find the AdobeTypekit section.

Paste in the Adobe Project ID. Then we’ll click on Get Project ID. Once Elementor successfully completes the integration you will see a little green tick, or check, as confirmation. 

Now scroll down and click Save. 

Tips and Advice on Choosing a Font for Your Project

HG: First of all, use a mood board. Choose three words that describe the idea or the emotion that you want to convey to your users. This will help your search. Let’s say that I want to convey happiness and childhood. I’m not going to pick a font that is thin and “high techy.” I’m probably going to choose something that’s a bit more joyful, perhaps something a little circular, something that’s a bit more childish. 

Think of the concepts, words that help you imagine the idea. If I say “ice cream,” for example, you have a specific idea of what ice cream should look like. It’s not going to be something square, right? But something circular. It’s the same for fonts.

MM: So you’re basically looking at the attributes of the font the same way you look at the attributes of an element, or an icon. You’re looking at it from a graphic point of view. I would say, even geometric. 

HG: Not always. If I’m conveying “woman versus man,” for example, men will be usually be represented by something more squared and a woman by something with curves. It’s not necessarily geometric. Perhaps you could call it a vision of an idea.

HG: I think that you should just have fun. If it’s something that is hard, and you don’t have fun with it, so it’s not worth it. I mean, I guess you’re going the wrong way about your work process.

MM: Speaking of having fun, where does your intuition come into this? How much does intuition play into making your choice of font?

HG: It’s something that comes with experience. I think that in the beginning, I wasn’t good at picking fonts because it’s a really difficult area and people are scared of it. And it’s okay, I can understand it. I was scared. But if you try to do it one time and then another, and another, you’ll begin to get better at it, just like with bicycles.

MM: Is there anywhere you would recommend where we could start learning how to pick fonts better?

HG: You should search Google fonts where you’ll see font pairings, and read about the font as well. There are a lot of places that show the font and offer recommendations and explanations as to why a font is good for a certain image or idea. You could also pick images and try pairing fonts and get a feel of what works.

A Final Font of Knowledge

As you can see, we’re taking the concept behind Monday Master one step further. Instead of taking a practical look at a subject or issue that concerns WordPress web-builders, we decided to take you, the readers, behind the scenes for an up-close and personal look at how top designers approach and solve real issues. This, to bring their insight and reasoning, behind their choices, to other users who could benefit from their knowledge and experience. 

Rather than watching examples of projects deliberately designed for educational purposes, we’ll be showing real projects and real campaigns that we’ve actually launched.

We’ll see what works, and if it doesn’t, you better believe that we’ll be figuring out why. 

This masterclass, we looked into fonts, what we need them to do, the role they play within the design and functionality of our websites. We also saw how to install and customize them for WordPress websites using Elementor. 

As always, if you have any advice, tips, or insight that could help other WordPress and Elementor users, please share it in the comments below. If you have any criticisms, we are equally interested in your thoughts. This is because we consider you the readers and community members to be a valid part of the journey that we set out on with each Monday Masterclass.

After all, our goal is to be the best at helping others excel in their craft.