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

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:

1. 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.

2. 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.

3. 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;}

1. 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.

1. 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:

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