This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Boris 'Yreane' Prokhorov
Posted Nov 14 - Read on Facebook

[Solved] I have some problems with correct view of my prototype. On 3 different modes I have 3 different pictures.

1. On design mode everything is perfect. All fonts are correct. And a shadow of my front layer is in the place.
2. On code mode I have almost the same, but the shadow is disappearing. Why?
3. When I'm trying to use it with Framer Preview on iPad, a lot of my fonts are crushing and shadow is still gone.
I'm using Google Font – Ubuntu.

Anybody has the same problem? Any ideas how to fix it?

4 Comments

Alan Travis

We just worked through a project needing custom fonts.

Are you using @font-face in your index.html?

Here's a good reference talking about @font-face https://css-tricks.com/snippets/css/using-font-face/

One problem we still ran into was the font not consistently rendering properly... Was like a Flash of unstyled type FOUT but didn't remedy even when we saw that the font had downloaded...

Our solution was to base64 encode the font and use a CSS stylesheet for the font.

Alan Travis

Losing the shadow has me more perplexed...

How are you configuring the shadow on Design tab?

Have you tried finding that div with dev console, to see what the styling is for it when on the code tab?

Lukas Guschlbauer

How did you embed the font? Because there‘s a Framer-Utils function in the docs for loading Google Web Fonts!

Boris 'Yreane' Prokhorov

Yeh, I'm using Utils

Read the entire post on Facebook