Webflow css does not publish correctly / webfonts

[E_G1 (E G)]

---

Here is my site Read-Only: wot-media.de
(how to share your site Read-Only link)

Hi everyone,

I am working on a super cluttered legacy project, with horrible class naming.
I’m running into a strange issue with fonts in Webflow and can’t figure out where it’s coming from.

I’ve uploaded Montserrat and Open Sans as custom (local) fonts and replaced all typography styles in the Designer. In the Webflow Editor/Designer I cannot find any Google Font in use anymore.

However, when the page is published, the rendered CSS/HTML still loads Google Fonts via webfont.js, and the styles in the browser do not fully match what I see in the Designer. I’m also unable to get the fonts to “refresh” or fully update on publish.

Here a concrete example where the designer does not match the rendered .css file:

CSS:

Webflow Designer - no combo class or whatsoever (shows Satoshi):

Evidence that I uploaded Montserrat (and after even Montserrat Custom) locally. It does not even show up in the webfonts anymore:

I’ve already checked:

• Project Settings → Custom Code (head & footer)

• Page-level custom code

• Embed elements

• Replaced all text styles with local fonts

Still, Google Fonts keep loading in the live HTML, and the typography behaves differently than expected.

Has anyone experienced a case where Webflow continues to inject Google Fonts even after switching everything to local fonts?
Any ideas where this could still be coming from or how to force Webflow to fully remove Google Fonts?

Thanks a lot!

[webdev (Jeff Selser)]

For each instance of Montserrat in the classes below you need to change them to reference your Montserrat custom uploaded fonts that will solve the problem. Here’s the class list of all the ones that need to be fixed.

.text-block-43._2022 {
  color: var(--white);
  text-transform: none;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.small-text.white._10 {
  text-align: left;
  margin-bottom: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 10px;
}
.heading-74 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 5px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 20px;
}
.heading-75 {
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
}
.card-description {
  opacity: 0;
  color: #ffffffc9;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  line-height: 160%;
  display: block;
  position: absolute;
  top: 10%;
}
.text-block-59.blue {
  color: #fff;
  text-transform: none;
  justify-content: center;
  align-items: center;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.bold-text-6 {
  color: var(--white);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.heading-78.h2 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
}
.text-block-70 {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
}
.link-23 {
  color: var(--black);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  text-decoration: none;
}
.submit-button {
  background-color: var(--white);
  color: var(--orange);
  background-image: url("https://cdn.prod.website-files.com/67a0aa9eb218c8139e5a99a3/67a1df4ba49002316ddf6307_weui_arrow-filled.svg");
  background-position: 80%;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 100px;
  width: 70%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 40px;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 500;
}
.checkbox-label {
  color: var(--white);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
}
.text-block-79 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
}
.submit-button-2 {
  background-color: var(--white);
  color: var(--orange);
  background-image: url("https://cdn.prod.website-files.com/67a0aa9eb218c8139e5a99a3/67a1df4ba49002316ddf6307_weui_arrow-filled.svg");
  background-position: 88%;
  background-repeat: no-repeat;
  background-size: 12px;
  border-radius: 100px;
  padding-right: 40px;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
}
.heading-91 {
  color: #333;
  margin-top: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 40px;
  font-weight: 600;
}
.text-block-155 {
  color: #000;
  text-align: left;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-left: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 130%;
}
.text-block-158 {
  color: var(--white);
  text-align: center;
  width: 37%;
  font-family: Montserrat, Arial, sans-serif;
}
 .heading-76 {
    text-align: center;
    text-transform: uppercase;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 110%;
  }
.text-block-76 {
    font-family: Montserrat, Arial, sans-serif;
  }
 .text-block-43.white.inst {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 15px;
  }
.heading-80.white {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
  }

[E_G1 (E G)]

Hi Jeff,

thanks so much for your time and effort!

As you can see Montserrat was already completely uploaded as custom font

Also on the first example that you have sent me, I can see that the font is already Montserrat custom, and not a Google Font. I could take the time and reassign manually all of the classes, but I am not 100% sure it will fix it? Should I maybe switch to another font and then back to the montserrat?

THANKS!

[webdev (Jeff Selser)]

The instructions I provided you are spot on. If you have any reference to the Google font “Montserrat” then webfont.js will be loaded. Every single instance in the list I gave you needs to be replaced with the “Montserrat custom”.