Custom font not showing

Design help General
1

I am trying to improve the load speed of a website and one of the suggestions I came across was uploading fonts instead of using Google Fonts. I have uploaded the font I would like to use, and can see it in site settings, however it is not showing up within the drop down in the designer.

Do I need to delete the Google Font version of this in order for it to show in the custom font section of the font picker?

2

@candeladata Yes, that’s correct—Google Fonts can take longer to load and impact your page speed score. If you’ve opted for local fonts, there’s no need to use Google Fonts.

Here’s an example from my setup:

3

Hi,

Here’s how you can fix the issue of your custom font not showing up in the font picker in the Webflow Designer:

It sounds like you’ve already uploaded your custom font in Site Settings > Fonts, but let’s double-check this process:

Steps:

  1. Go to Project Settings in Webflow.
  2. Select the Fonts tab.
  3. Click Add Fonts, and upload your font files (e.g., .woff, .woff2, .ttf) for both normal and bold/italic variations.

After uploading, Webflow will automatically add them to the project, but these won’t automatically appear in the Designer unless they’re available in the right section.

Use Custom Code for Font (If Not Appearing)

If the font still isn’t showing in the font picker after these steps, you can try adding a custom CSS rule to load the font manually. This might be needed if Webflow isn’t automatically recognizing it for some reason.

Here’s how you can manually load your font via custom code:

  1. Go to Project Settings > Custom Code > Head Code.
  2. Add this CSS snippet to load your custom font:

@font-face {

font-family: ‘Your Custom Font Name’;

src: url(‘/font.woff2’) format(‘woff2’),

url(‘/font.woff’) format(‘woff’);

font-weight: normal;

font-style: normal;

}

  • Replace ‘Your Custom Font Name’ with the exact name of your font.
  • Replace the URLs with the URL paths to your font files. You can find this path by uploading the font and then right-clicking to copy the URL in Webflow.

Save and publish your site.