HEY

Participate in the next Webflow Challenge!

Tips for adding typography to Webflow?

You think none of the basic Webflow typography is suitable for your project? I'll give you some tips on how to add a typography to Webflow.

Updated on

15/6/2020

add a typography on Webflow
Photo by David Clode on Unsplash

You think none of the basic Webflow typography is suitable for your project? In that case, you'll have to import new ones. But is it possible? Yes, I assure you, it's entirely possible. How is that possible? Here are some tips on how to add a typeface to Webflow.

If you are one of those who are only coming to my site for the first time, you should know that you can have a Webflow account for free. You can immediately manage two projects. Your functionalities will obviously be limited, but be aware that you can already realize a nice project. You can even go as far as changing the typography of your site.

add a typography on Webflow
Photo by David Clode on Unsplash

How to change the typography of your site?

Changing the typography of a webflow website is done in just a few clicks! To do so, just click on the brush icon at the top right of your screen. From there, you can change the typography of the site at your convenience. But as I told you at the beginning, you may not be happy with any of the typography. This is where you need to import new ones.

How do I add a typography on Webflow?

To change this option, you have to go to your account dashboard. Again, there are 3 ways to add a typography on Webflow :

  • choose fonts from Google Fonts
  • select fonts from Adobe Fonts
  • import typographies downloaded from the internet

There is a Youtube video in which I describe this at the bottom of the article. Support me by subscting to the YouTube channel "Happy Desk Design"

add a typography on Webflow
Photo by Clara Cordero on Unsplash

For the first case, you're making it a lot easier for yourself! No need to download fonts from Google Fonts to add typography to Webflow. Indeed, a Google API is installed on Webflow. But it also updates automatically and regularly. No risk of missing the trends of the moment!

Now let's talk about Adobe Fonts. Webflow also has an API for this platform. This means that all the fonts you have in your Adobe account are directly available on Webflow.

Finally, the third option concerns customised typefaces or those downloadable from the internet. In this case, it is sufficient to import the typefaces concerned directly. They should first be downloaded as a ZIP file. Then you have to unzip it. Then you click on the import button, and there you can select several fonts. You can use them immediately.

add a typography on Webflow
Photo by Pedro Lastra on Unsplash

I'll give you one more tip

You know Font Awesome? It's a library of free and paid icons (but in my opinion, you can really do without the paid account; you have everything you need with the free one).

If you want to add icons to your site without having to import csv images, just go through Font Awesome (knowing that the images will make your website heavier). And yet, you can still change the format of the icon, its style, its thickness, its size, its color...

So how do you use it? Use the search bar to look for the icon you are interested in. Let's take an example: you want an arrow? In this case, write this name in the search bar (in English, because the site is in English). As I mentioned before, you don't need to download it in svg. Copy the icon, and then paste it somewhere on your site (where it should go).

At first it will appear as a square. Don't worry, it's perfectly normal. Now, select this icon, and choose the typography you want (the one you just imported, for example). Your icon will then appear in its real form. Finally, like all fonts, you'll finally be able to change its color, size, etc.

add a typography on Webflow
Photo by Poseidon X on Unsplash

Conclusion
The design of a website depends on several things: colors, structure... But the choice of typography is not to be outdone. This element can even make all the difference! Hence the importance of choosing it well. Fortunately for you, you can now add a typography on Webflow (any one).

You never miss any of my articles (and videos), but you haven't decided to join Webflow yet? Maybe it's time, don't you think? ;)

YouTube: How to add a typography on Webflow?

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training