Hello,
I am running into an issue with the fonts in Form Pro with are not using the style defined in control center… It works for the desktop and tablet breakpoints but not for in Android / Chrome…
Here is a URL to the beta web site:
http://xftfghc.cluster031.hosting.ovh.net
TIA for any help.
What font are you using? Is the font you’re using a standard web safe font?
If it is a non-web-safe font, have you…
(1) embedded the font’s files manually?
(2) used the Typeface stack to load and access the font files?
(3) are you loading it from a CDN like Google Fonts?
If you’re using a non-web-safe font and you’re not doing any of these things, then the browser, OS, etc. probably doesn’t have access to that font and is using one for your fallback fonts.
You’d be surprised how few web safe fonts there are.
Yes, this is Helvetica-Neue. I initially started with Roboto but realized this could only mean trouble.
Thanks!
Helvetica-Neue is not a standard web-safe font. While Helvetica is a web-safe font that is found on many computers, Helvetica-Neue is a different font and is not found on a majority of OSes. Using it means that any OS that does not have it installed will use one of your fallback options instead.
Gotcha.
I did add the typeface stack to load the font, and it does work because the font in form pro is changing but the weight just does not change like it does for the rest of the page for mobile devices.
And you’ve made sure, in the Typeface stack, that you’re loading all of the font weights that you’re making use of?
I think so. I am only using 400 and 700 weights. They are both set in Control Center to Typeface 1. Also in control center I am setting different size font for mobile, which is taken into account as I am seeing the change in Android.
Typeface 1 is defined in its stack. Besides I am unable to see any ways to override fonts in Form Pro…
Thanks
I’ve just sat down in the office and setup a simple page and everything seems to be working just as it should. I’ve recorded a short video showing it in action. I’ve done nothing out of the ordinary here that isn’t covered in the Typeface tutorial videos.
Have a watch, and give this a try:
If you set things up in this way they should show just fine in Chrome or on Android. Here’s a look at the page shown in Chrome:
If it is not working still then you’ve likely misconfigured something. In that case I’d suggest making a simple project file, like my example and sharing that with us here on the forum.
Provide us a copy of your project file please. Create a ZIP file containing your project file. This is the file you open in RapidWeaver to edit your site. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for us. Paste that download link in your reply.
It being the weekend I probably won’t be back in the office again until Monday (could change but who knows). If you can’t solve your problem using the example I’ve provided then post that project file and maybe someone here can assist you over the weekend. If not I can circle back around to it Monday.
Additionally, here is the project file I created in the above video as well, if it helps you out: form-pro-test.rw8.zip - Droplr
Thank you sooooo much for the explanations and videos.
It confirms that I have it setup exactly the way it is supposed to be setup. Only thing is that the font size does not change. It does not follow what is set in control center (the rest of the page does). PS: The font type changes, like in your video, no problem.
Here is a picture of what it looks like in the simulator in RW 8.9.3 and I believe your latest stacks (from last week).
So I played around with it a bit and realise that the problem could be rooted in the ‘Custom Paragraph Font Size’ in Control Center which does not seem to apply to labels (and all other elements) in Forms Pro. Do you see any other way to tweak the font size of labels in Forms Pro on Mobile vs. Tables vs. Desktop?
TIA!
As you might guess, the Paragraph font size setting applies only to Paragraph tags. This is talked about in the documentation for the Control Center stack:
Applying a different font size to the form elements at each of the three breakpoints is not a feature of the stack.
All right, thx. Perhaps opportunity for improvement?
Perhaps. I’m looking at something a bit more dynamic for a future update.
