Font changes and rounded borders on mobile devices

Hi, 

I created my form using the font "Play" and it works fine on a mac. However on android, iPhone and iPad the font reverts to some default font, NOT the font I used to create the form. How can I make sure that the font is correct on all devices? Also, my square edges become rounded edges on mobile, so over all my form looks really different on different devices, which I'd like to avoid. Any help would be much appreciated!

Many thanks!

What you're describing is the normal behavior when it comes to input fields, regardless if the form was built with JotForm or not. The device's (iOS and Android) styling overrides the styling of input fields (e.g. rounded borders, default fonts, field highlighting, etc.).

The least we could do is offer a CSS workaround that will prevent the rounded borders and force the font family you're using.

.form-textbox, .form-textarea {

  -webkit-appearance:none;

  border-radius: 0;

}

.form-label {

    font-family: Play, sans-serif;

}

I also recommend you clean up your current CSS codes before you paste these. I'm seeing an extra closing curly brace on one of your CSS code sections.

Another approach to this (which I recommend) is to leave it as is and don't override this default behavior. Most online mobile users are used to seeing form fields like this, thus explaining why browsers render them this way.

Related articles:

https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding

https://stackoverflow.com/questions/7599533/ios-forces-rounded-corners-and-glare-on-inputs 

Oh thank you so much that worked perfectly... I might leave the default behaviour as you suggest but it's nice to know I have control over this!! And I found the rogue curly bracket in my code :)

Great, I'm glad you found the extra curly brace :)

Just to further explain the CSS I provided, this only targets Textboxes and Textareas. As you build forms in the future, you may notice other form field controls looking different on mobile devices (e.g. Radio buttons, checkboxes, dropdowns, etc). Should that time come and you need help with which CSS codes to use and how to target them, just open a new thread so we can assist you.