How can I fix the issue of my custom fonts not showing up on Safari and Firefox for my portfolio website in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To fix the issue of custom fonts not showing up on Safari and Firefox for your portfolio website in Webflow, you can follow these steps:

Check Font Formats: First, verify that the font formats you are using are compatible with Safari and Firefox. Ideally, you should use TrueType Fonts (TTF) or OpenType Fonts (OTF), which are widely supported across different browsers.
Upload Font Files: In Webflow, navigate to the project settings and click on the "Fonts" tab. Find the "Upload Fonts" section and upload all the necessary font files (TTF, OTF, WOFF, WOFF2). It's essential to provide different formats to ensure compatibility across multiple browsers.
Set Font-Face: After uploading the font files, you need to define a font-face rule in your project's CSS. In the "Custom Code" section of your project settings, click on "Add Custom Code" and choose "Before Head". Insert the following code snippet, replacing your-font-name with the actual name of your font:

@font-face {  font-family: 'your-font-name';  src: url('your-font-name.woff2') format('woff2'),       url('your-font-name.woff') format('woff');  /* Include other font formats if necessary */  font-weight: normal;  font-style: normal;}

Apply Custom Font: With the font files and font-face rule in place, you can now apply the custom font to your desired elements in Webflow. To do this:

Select the element you want to apply the custom font to (e.g., a heading, paragraph, or a specific class).
In the Style panel, click on the font dropdown menu.
Under the "Custom Fonts" section, you should see your uploaded font. Select it from the list to apply it to the selected element.

Publish and Test: Once you've made these changes, ensure to publish your Webflow site and test it on Safari and Firefox. If the custom font still doesn't display correctly, consider clearing the cache on your browser or checking if there are any conflicting CSS rules overriding your font settings.

By following these steps, you should be able to resolve the issue of your custom fonts not showing up on Safari and Firefox for your Webflow portfolio website.

Additional questions:

How do I upload custom font files in Webflow?
How do I define a font-face rule for my custom font in Webflow?
How do I apply a custom font to specific elements in Webflow?

Do you have experience modifying Webflow templates and can you provide guidance on how to remove the login/logout and account setup module from a template?

How can I replace "Class 2" with "Class" for all the objects that use it in Webflow? Is there a way to copy the properties of Class to Class 2 to make the process faster?

First question: Why does Webflow have the option to convert a text input into a password input type if it can't be submitted?Second question: Is there a workaround or solution available in Webflow for creating a form with a password field that can be submitted?

How can I capture the value of a checkbox outside of a form tag and paste it into a hidden input inside the form tag in Webflow?

How can I turn off the connection to Google Fonts in my Webflow project?

Can I filter the tags displayed on the Blog Template using a Collection List in Webflow?

Is there a way to disable Fullpage.js in Webflow when the phone is in landscape mode?

How do you implement lightbox functions with Lightbox2 in Webflow websites?

How can I add a "scroll-to-top" option using Swup.js in my Webflow project?

Why does the contact button on my portfolio website not go to the start of the section when clicked, but works properly when opened in a new tab? Can someone help me troubleshoot this issue?