2.4
Importing Fonts
Learn to build websites without code in Webflow
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
56
lessons
7
hours
MINUTES
2
files
Level

Importing Fonts in Webflow

On this Webflow lesson we take a look at importing Google fonts. How to install custom fonts in Webflow and how to configure Adobe API using Webflow.

Webflow Project Files

All our project files for you to practice and play with along with some bonus materials.

Download
Download

It's your turn!

Take a moment to download this Webflow Template so you can practice, experiment and use however you want!

📥 Download Template

Let's take a look at importing fonts
directly into our project.

Now, if we open up our Milanote,
remember that on the client assets

we have already the Sovereign font, we
can download that on our local computer

but notice that one of the fonts from
the branding is actually Google Fonts,

its available on Google fonts, it's called
Archivo Narrow, so what I wanna do

is go over to fonts.google.com, you'll
notice that the font is available on

Google Fonts, so that means, if we go
our settings in our project we click

on fonts, we'll be able to simply find
Archivo Narrow font face, we select

that, and will automatically get that
installed directly into our project,

including all the different sizes right.
So regular, italic, and different bold

sizes. The other thing we wanna do
is upload the font Sovereign that

we've downloaded from our brief
in Milanote, and upload that.

You wanna upload the actual font
over, if its a custom font and it's not

available both in fonts and Adobe
fonts, or if it's licensed directly with

the client, you can just uploaded
directly there, and you'll notice

how it now gets install with the original
400 which is the normal size.

If you have already set up your adobe
fonts account, you can access you adobe

fonts API tokens, pull out the token and
install it directly into your project for you

to pull out some of the project typekits,
these typekits will enable you to install

to use specific fonts license by Adobe,
which is really handy.

We wanna make sure we have all
those fonts installed before we

even start playing with the designer
view.

All right guys so let me go ahead
and explain to you some limitations

that Webflow does have, so I'll see
you on the next lesson.

Coming Soon

The future of the web without code
56
lessons
7
hours
MINUTES
2
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@thekreativepro

Neftali is an award-winning creative director with over 15 years of UX/UI design experience, a passionate no-code advocate and instructor @ Awwwards Academy!

Courses

Everything you need. 🥳 Forever Free.