- Web font — what it means
- A web font is a font for websites that renders with clean letterforms and the same design on every device. The text stays searchable, which is strong for SEO, and correcting copy during updates and maintenance is simple.
Note: the steps and screens in this article are as of 2021. Names and placement may have changed in Webflow’s current UI.
This article answers that question.
✓ What this article covers
- How to add fonts to Webflow (all three methods)
- The easiest way to add a font to Webflow
- The fonts worth adding to Webflow
I build websites with Webflow for a living
and earn around ¥300,000 a month from it.
This blog is built and managed in Webflow too,
and I have added fonts by every one of these methods myself.
(2026 update: I am now based in Sendai, running Webharu Inc.)
Drawing on that, here is how to add fonts
and which fonts I recommend.
How to add a Google Font to Webflow (the easiest method)
Selecting from a dropdown is all it takes — the easiest way to add a font.
- 1. Choose the font you want to add
- 2. The added font then appears
Google Fonts are convenient web fonts.
Common faces such as Sawarabi and Noto Sans JP can be added in moments.
What is a web font?
If you want to understand web fonts properly, read this article by Sayuri.
A simple guide to using web fonts: try Google Web Fonts (Japanese)
The benefits of web fonts
1. Strong for SEO (the text is searchable)
2. Easy to correct text when updating and maintaining
3. The letterforms look clean on every device
4. The same design displays on every device
5. You can differentiate your typography
6. No need to make separate text images for desktop and mobile
Those are the benefits of web fonts as the article lists them. Having the display change from device to device is inconvenient in all sorts of ways, so using a web font may well be the best choice.
How to add an Adobe Font to Webflow (three steps)
Using Adobe Fonts in Webflow takes the following three steps.
- [Step 1] Set the API token
- [Step 2] Choose the fonts to add
- [Step 3] Save in Webflow
The whole thing is about five minutes of work.
Using every Adobe Font requires a paid plan. Some are free to use, so this walkthrough uses a free font as the example. (The steps are identical on the paid plan.)
[Step 1] Set the API token
First, get an API token and paste it into Webflow.
- 1. Log in to Adobe from the Adobe Fonts account page.
- 2. Once logged in, open the account menu at the top right and open the API tokens page.
- 3. Click “Create a new API token” to create one.
- Paste it into the Adobe Fonts field in Webflow.
That is all there is to the API token. Next, choose the fonts.
[Step 2] Choose the fonts to add
1. Clearing the “Show fonts available with Creative Cloud” checkbox
displays only the fonts that are free to use.
2. The fonts marked with a </> icon are the ones you can use.
Moving to the paid plan increases the number available.
Here I will add Source Han Sans and Honoka Maru Gothic.
- 2. Click the </> icon.
- Create and save a web project file.
- Add every font you want into the same file.
To use these fonts on a web page, copy this code inside the <head> tag of your HTML.
That message appears, but Webflow is no-code, so ignore it and you are done.
Go back to the fonts screen in Webflow.
[Step 3] Save in Webflow
The file and fonts you added are listed; select them and save.
That completes adding an Adobe Font.
If nothing appears, try refreshing the page.
And nothing takes effect until you save, so do not forget to save.
Note: when the font does not take effect
As Webflow itself notes, it can take time to take effect. The more fonts there are, the longer it takes. Wait it out calmly. On a slow connection it can take around 20 minutes.
How to add a custom font to Webflow: compress under 2MB, then upload
Using a custom font in Webflow means uploading a font file under 2MB.
In most cases the font has to be compressed.
Here I am using Poprum Cute, because the change is easy to see.
- [Step 1] Download the tools that compress the file
- [Step 2] Subset the font
- [Step 3] Convert to WOFF
- [Step 4] Add it to Webflow
Let’s work through that.
The site I used to learn this procedure is below.
How to slim down a Japanese web font and put it on a website (Japanese)
I am going to take what that article taught me and apply it to Webflow.
[Step 1] Download the tools that compress the file
First, following the article, download the font and subset it.
Start by downloading the app that shrinks fonts.
- Musashi System: Subset Font Maker
- Musashi System: WOFF Converter
On Mac there are 32-bit and 64-bit builds,
so download the right one. You can check which you need with the article below.
How to check whether the Mac you are using is 32-bit or 64-bit (Japanese) “Everything from the Intel Core Duo, around 2006, onward is 64-bit.”
So if you are on a recent Mac, you are on 64-bit.
[Step 2] Compress the font
First, use Subset Font Maker to build a smaller font file.
Compress the font as follows.
1. Select the font you want to shrink.
2. Set where the font will be saved.
3. Enter the characters the font should contain.
Borrow the character string from the site below to fill in step 3.
Also add any unusual kanji you use.
4. Decide the font name and tick the box that launches WOFF Converter.
How to cut the file size of a Japanese web font by subsetting (Japanese)
Copy the level-1 kanji plus symbols, romaji, katakana and hiragana from the link below and paste them into the “characters to include in the font” field in Subset Font Maker. https://docs.google.com/document/d/1Qs-XTAZEgFxx9TbfTNCrGMGuEJqxv2T5SKTLRJ4Gv6Q/edit
As in the image above, if the font name in step 4 contains an unusable character such as “☆”,
the app crashes. Use only single-byte alphanumerics for the file name.
Fill everything in, start the build, and you get a file under 2MB.
A font file should be as light as possible, so let’s compress it a little further.
WOFF Converter is what you use from here.
[Step 3] Convert to WOFF
Use the WOFF app to convert the file to WOFF.
WOFF2 is the lightest, but fewer platforms support it,
so build for your use case. I am going with WOFF2.
Tick the checkbox and build WOFF2.
Nothing else needs changing.
[Step 4] Add it to Webflow
With the slimmed file finished, upload it to Webflow.
Once uploaded you can choose a weight, but
the slimmed file has no bold information in it, so nothing changes.
Pick the weight you used in Subset Font Maker and name it accordingly.
Upload two separate files at different weights and you can use both.
That is the custom font setup.
In summary: for adding fonts to Webflow, Google Fonts is the one to reach for
That is every route for adding a font in Webflow. A quick recap.
- Google Fonts is a matter of selecting one, so it takes about a minute and is extremely easy.
- Adobe Fonts is just choosing fonts at Adobe, once the API token is set.
- Custom fonts can be uploaded as long as you can shrink the font. Use Subset Font Maker and WOFF Converter to do that.
If you are worried that adding a web font will slow the site down,
run it through a page-weight checker.
I came across an article suggesting you add a custom font and then set several fonts as the font name.
Doing the same and exporting the code does let you set a font family with several fonts.
But it looked poor in the Webflow design view, so I have skipped it here.
On the Webflow forum you also see the answer that
“the font has to be downloaded to the server itself,
so specifying several fonts in the family is pointless.”
In any case, to keep everything inside Webflow, a web font is the best route.
If you are stuck on a font, start with Google Fonts.
Sawarabi, Noto Sans and Hannari are easy to work with and popular.
FAQ
How many ways are there to add a font to Webflow?
Three: Google Fonts, Adobe Fonts and custom fonts. The easiest is Google Fonts, where you simply pick one from a dropdown — about a minute of work.
How do I add an Adobe Font to Webflow?
Three steps — set the API token, choose the fonts to add, and save in Webflow — for about five minutes of work in total. Some Adobe Fonts are free to use, and the steps are identical on the paid plan.
Is there a size limit on custom fonts in Webflow?
You have to upload a font file under 2MB, and in most cases that means compressing it. Shrink the font with Subset Font Maker, then convert it to WOFF with WOFF Converter to slim it down.
What if a font added in Webflow does not take effect?
Nothing takes effect until you save, so check that first. It can also take time to appear, and the more fonts there are the longer it takes. On a slow connection it can take around 20 minutes, so wait it out calmly.
What are the benefits of using a web font?
The text stays searchable, which is strong for SEO; correcting copy during updates and maintenance is easy; and the letterforms look clean and the design stays the same on every device. It avoids the inconvenience of the display changing from device to device, which makes a web font the best choice.
