My Client is using a font on the web that doesn't have a character "+" in it. I have a product that is called Clean + Fresh on an e-commerce website, and I can see that when inspecting the element the "+" is loading correctly. The problem is the font that doesn't have this character.
Instead I get "Clean 1 Fresh" rendering on a page.
Is there any way that a piece of code can detect for a PLUS sign in a specific CSS class, and then replace that character with another font that contains that character - for example Arial.
Here is an example of the product CSS entry:
<h1 itemprop="name" class="product_title entry-title">Clean + Fresh </h1>
Thank you for your help.
This is easily solved by wrapping the plus sign in a span, and defining a standard font-family for it.
h1 {
font-family: cursive;
}
span.plus {
font-family: Arial, Helvetica, sans-serif;
}<h1 itemprop="name" class="product_title entry-title">Clean <span class="plus">+</span> Fresh </h1>