Hi, I reached out to Yabdab support regarding an issue a FormSnap 3 form I’ve created on our website. In Chrome the form takes on the appreciate fonts and style as configured in RW and FormSnap.
However on Safari the font is dropped and the fields are clipping text.
Mike from Yabdab suggested I reach out to @elixirgraphics on the possible cause. This is a fresh project file. Using the latest updates of tools on an M1 Mac.
Which font are you using?
Wondering if you are using a non-web safe font that Chrome might include but Safari doesn’t? And that you are not loading it in manually from your website?
Hi @jhunkins, I am load a custom font using Foundry. This font loads as expected in Safari outside of the FormSnap 3 stack. I suspect a glitch in the Foundry Stack or FormSnap stack not letting CSS pass through? IDK
Most of us who would try to help do not have FormSnap 3, so it’s very hard to know what’s going on. As a start, if you post a link to the page with the issue, we can have a look and see if we are seeing the same thing. We might also be able to tell what’s happening from looking at it.
Hi @DLH yeah. I get it. Seems to be the support circle jerk with Rapidweaver and it’s nest of plug-ins. Really hoping 9 helps in this space. I like the tool but man when it doesn’t work as expected it just eats productivity for lunch.
I’m building out this website. The form on the waitlist button at the bottom of the page. It’s a clean build, due to a corrupted RW project file I just started from scratch.
In chrome the custom font is respected and there is no clipping of text. In Safari the text style is ignored and oddly different for letters vs numbers LOL.
LMK what you find. Thank you for taking the time to consider my problem.
I’m pretty sure something is wrong with your font setup in Typeface. I don’t think it’s actually loading ‘Gilroy’ and it’s using your fallback font. For your non-form text, the fallback is ‘sans-serif’ and for the form text it’s ‘regular’. Safari and Chrome must have different definitions for ‘regular’.
I think you’re trying to self host the font and have something set wrong. Set your fallback for ‘serif’ so it’s more noticeable if your main font (Gilroy) is not loading. Once you have it setup correctly, you can change the fallback to ‘sans-seif’.
You may want to refer to the Typeface documentation for the self-hosted font details.
Thank you @DLH. I’ll dig in… I’ll google but if you have an index of fallback fonts for Safari, I’d be interested.
Quick update. found a second theme installed on my server. Deleting it fix the font issue. Any thoughts on the clipping?
From what I’m seeing, that page is still using the fallback font. It’s not loading Gilroy. FireFox shows the error in its console.
This was the first time I loaded the site in FF, so it’s not cached.
@DLH. yeah not sure why. I’ve confirmed the links again. placed them in a “fonts” folder in the Resources folder. Still working through it.
@DLH thank you for working through this with me. I just pushed an update right after your post. I went through and reloaded the typeface across all pages and copied the woffs into the SnapForm folder…
Now the site is loading the fonts as expected. Thank you!
You’re using partials for the Foundry and Typeface stacks, correct? This way you don’t have to make changes on every page.
I was in my lost build. I hadn’t gotten to recreating/updating. Just refreshed them.
You shouldn’t be placing the fonts into a fonts folder in your resources. Be sure that you re-watch the tutorial video for self-hosting fonts in Typeface. Follow it exactly.
Additionally, how are you applying the font to FormSnap? I don’t have a copy of it so I’m not familiar with it. Does it have a place to assign fonts? Does FormSnap apply any fonts of its own in its CSS? If so how are you overriding that?
@elixirgraphics thank you for the reply. Working through this yesterday I was able to reload Typeface stack on the the site and updated FormSnap’s font styles. All resolved.
Now I’m trying to block direct access to a post sign up screen.
Good to hear.
Not clear here – is this something with Foundry you’re referring to?
thanks for this clarification. I saw other plugins doing this and I thought it would make the backend cleaner. Doesn’t seem to affect the site, fonts are loading as expected. I did copy the fonts into the SnapForm resource folder as well.
No, I think it’s just some coding I need to figure out. There are solutions out there, not working in my primary coding language and working out how to best incorporate JS, Cookie, PHP solutions takes a minute.
The goal is to keep someone from reaching a url without going through our intake form that redirects upon success to that URL.
Open to suggestions, working through google today.
