I'm using a Google Font Family call "Palanquin". Unfortunately, Palanquin has no way of rendering straight quotes (both single and double). Instead, it renders all straight quotes as closing curly quotes.
That means that if a user types "this" into a textarea, it will be rendered as ”this”. See the difference? To see it better, type straight quotes here:
https://fonts.google.com/?query=palanquin
As far as I know, this is only a problem in computer web browsers. On an iPhone, this isn't a problem, since iOS intelligently converts straight quotes to appropriate curly quotes as the user types (similar to MS Word). I haven't tested on Android.
I'm open to all suggestions about how to fix this. One thought I have is to use JavaScript to wrap all straight quotes in a span with a class that uses a different font family. Something like this:
var userValue = textarea.value
var changedValue = userValue.replace(/"/g, "<span class=\"differentFontFamily\">\"</span>")
But that isn't correctly inserting my HTML. It just outputs a string with visible HTML in it.
Please help! Thanks!
I figured out a solution that is good enough for me. When a user enters a straight quote with a space in front of it, I'm assuming that they would want that to be an open-curly quote, so I'm changing it to that using this code:
var userValue = e.target.value
var changedValue = userValue.replace(/\ "/g, " “")