Streaming live at 10am (PST)

Chrome / Fire Fox / Edge Interaction and Fonts

Hi,

I am having some trouble when I publish with Firefox, Edge, and Chrome.

Chrome works no problem but Firefox is changing my font and messing up my interactions. Edge is changing my font and has a slow load of background image.

Thoughts?


published site https://prestoncitybible.webflow.io/

Here is my public share link: https://preview.webflow.com/preview/prestoncitybible?utm_source=prestoncitybible&preview=536eb1ed79c69da1ace26cbb9cf746c4

Fonts look the same to me. Please be more specific about the interactions problems you experience.

On chrome the fonts are correct. On firefox and edge they are bold. Also on firefox the On Mission text is supposed to swipe in from the left after page load. On my end when i use firefox the text interaction is almost complete by the time the page loads.

They are not though. Please provide screenshot with the problematic fonts.

This is caused by delay in page rendering due to the these errors in firefox. Most of these are because of some security issues with your embed. Not sure what could be done with this. @webdev can you have a look? :pray:

RE: Firefox Video Issues - Your provider for embedded videos (https://www.sermonaudio.com/main.asp) is using VideoJS. This is not a webflow issue. You will need to seek support from your provider. If they can’t address the issue you might consider using an alternative on the home page.

1 Like

here is the font issue. the bold one is firefox. edge does the same thing.

CloudApp

The issue with the interaction can’t be the embed. I took it out and it still happens. @webdev

CloudApp

\interesting that I do not have this behaviour on both browsers you mentioend. Could it be cache on your end? Can you try opening the site from different computer?

I only looked at the console warnings, not interactions.

Instead of looking at the screen and making determinations with your eyes, look to the source. You can inspect the page on different browsers and operating systems to see which font is loaded, what the size and weight is. When you use devtools you can also disable the browser cache, insuring that you are looking at the code served by the web server.

I just looked at the navbar on OS X in Safari, Firefox, and Chrome. All 14px, Montserrat, normal weight.

Might be different on windows. You can go check. From there you can isolate your issue and adjust your CSS as you see fit. Base styles and fonts can be different on each device, OS, and browser version, and make.