Is anyone else experiencing a bug with Montserrat 400 Normal font weight not displaying correctly on Firefox, Edge and Internet Explorer in comparison to Chrome in Webflow? Any suggestions on how to address this issue?

Published on
September 22, 2023

Bug with Montserrat 400 Normal font weight not displaying correctly in Firefox, Edge, and Internet Explorer in Webflow

If you're experiencing issues with the Montserrat 400 Normal font weight not displaying correctly on Firefox, Edge, and Internet Explorer in Webflow compared to Chrome, here are some suggestions on how to address this issue:

  1. Check font availability: First, ensure that the Montserrat font with the desired font weight (400 Normal) is actually available and properly installed on your computer. It's also a good practice to check if the font files are correctly linked in your Webflow project.

  2. Use web-safe fonts: If the Montserrat font is not rendering correctly across all browsers, consider using web-safe fonts as fallback options. Web-safe fonts are fonts that are widely supported across different operating systems and browsers. You can find a list of web-safe fonts on websites like Google Fonts or fontsquirrel.com.

  3. Import the font using @font-face: If the issue persists, consider importing the Montserrat font using the @font-face rule. This allows you to have more control and ensure consistent font rendering across all browsers.

  • Upload the Montserrat font files (e.g., .woff, .woff2) to your Webflow project using the Assets Manager.

  • Open the Custom Code section in Webflow Designer (Project Settings > Custom Code) and add the following CSS code:

    ```css
    @font-face {
    font-family: 'Montserrat';
    src: url('Montserrat.woff2') format('woff2'),
    url('Montserrat.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    }
    ```

    Note: Adjust the file names and paths according to your actual file names and folder structure.

  1. Check font file formats: Ensure that you have both .woff and .woff2 file formats available for the Montserrat font. Different browsers may support different font file formats, so providing multiple formats helps ensure compatibility.

  2. Clear browser cache: Sometimes, browsers may cache the font files and not update them even after changes have been made. Clearing the browser cache can help in such cases.

  3. Test on different devices and browsers: It's important to test your website on different devices and browsers to ensure that the font rendering issue is not specific to certain configurations. Make sure to test on various versions of Firefox, Edge, Internet Explorer, and Chrome.

  4. Reach out to Webflow support: If none of the above solutions work, reach out to Webflow support for further assistance. They are knowledgeable about the platform and may be able to provide specific guidance based on your project setup.

By following these suggestions, you can address the bug with Montserrat 400 Normal font weight not displaying correctly in Firefox, Edge, and Internet Explorer in Webflow.

Additional Questions:

  1. How can I change the font family in Webflow?
  2. What are web-safe fonts and how do I use them in Webflow?
  3. Can I use custom fonts other than Google Fonts in Webflow?