a single specific character; different rendering in headings and text - Support

Tagged: characters, heading, text

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
January 28, 2022 at 5:06 am #1337609
steridhh
Participant
Howdy,
I am describing a phenomenon for which I have no explanation:
when I use the & character (backend) I see a different result in the frontend:
the character is rendered correctly for normal text, but incorrectly for headings.
At first I thought it was the font I was using.
But now I have exactly the same problem with another website, although I use a completely different font here.
The only way I can solve the problem is to replace the space between the & and the next word with an entity. However, this is a bad solution, because as soon as I edit the relevant heading in the backend, the problem returns: the system deletes
or translates this into a space and therefore the & is displayed incorrectly in the frontend again.
Now I suspect that the problem lies with the Theme Enfold.
Is this a known problem and is there (hopefully) a better solution?
For this issue, please see the following images:

first picture
<br />
second picture
<br />
third picture
<br />
fourth picture
<br />
fifth picture

I hope you have an idea…
Thank you for supporting me.

Stefan
- This topic was modified 2 years, 9 months ago by steridhh.
January 28, 2022 at 1:50 pm #1337718

Mike
Moderator

Hey steridhh,
Thank you for the screenshots, please link to a test page with both “&” showing so we can examine.
This looks like this “&” on this demo created by the “great vibes” font

once we examine we will know better if it is a font issue or not, since he non-braking space   is changing the “&” perhaps another option is to use & instead

Character Entity Reference Chart

Best regards,
Mike

January 30, 2022 at 4:11 am #1337879
steridhh
Participant
Hi Mike,
It doesn’t matter which font I use; it is always the same phenomenon. I tried different scenarios. First time this happened on this client site I made, I thought it was a font issue:
Ver La Luz
Because I didn’t have any other idea for a solution, I always put the ‘&’ directly in front of the first letter of the next word without any space.

Now I want to create another customer website and I use a different font and I have the same problem again.
That’s why I’ve tried a few things to make sure that it’s not because of the fonts used.
(I know the problem that locally loaded fonts are not displayed correctly if the .zip–file does not have the same name as the fonts it contains (subfolder with static fonts is called ‘static’). I only use static fonts and have already renamed the subfolders.)

First:
I made a exact copy of ver-la-luz:
exact copy of Ver La Luz

On the start page I ran through various scenarios and described what I did in each case.
You can see which fonts I used in this picture:

Second:
This is the other website (still under development),
on which the same problem appears:
other website – same problem

This image shows what is a headline and what is a normal paragraph:

and this is a picture of the fonts I used here:

Now one can think it’s because I use different fonts for headings and paragraphs. That’s why I created an exact copy of konzepte-neu.website-service-hamburg.
Third:
exact copy of website two with same problem while rendering fonts.
Here I only loaded one font locally (‘Rubik’ ) and I used only this font for headings and paragraphs ( = body ).

The problem is always the same:
The ‘&’ is rendered incorrectly in headings and is displayed correctly in normal text, regardless of which font I use.
I cannot solve the problem.
Thanks for supporting me.
Stefan
- This reply was modified 2 years, 9 months ago by steridhh.
January 30, 2022 at 10:28 am #1337902
Guenni007
Participant
maybe you only deactivate the ampersand filter – try in your child-theme functions.php:
```
add_filter('avia_ampersand','__return_false');
```
or you can set the class inserted by that filter to be not special:
```
.special_amp {
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
```
January 30, 2022 at 3:08 pm #1337911

Mike
Moderator

Hi,
Thank you for the link to your page, as Guenni007 has pointed out the ampersand filter is being applied, please try adding this in your child-theme functions.php
add_filter('avia_ampersand','__return_false'); Thanks Guenni007

Best regards,
Mike

January 31, 2022 at 1:31 am #1337959
steridhh
Participant
Hi Guenni007, hi Mike,
I don’t understand the purpose of the filter, but whatever…

If I use the php script as recommended
either the whole headline has disappeared or even a whole paragraph.
But the css works fine if I add an !important.

try to deactivate ampersand via php

commented php

Thanks a lot for supporting me

Stefan
- This reply was modified 2 years, 9 months ago by steridhh.
January 31, 2022 at 6:51 am #1337986
Ismael
Moderator
Hi,

Thank you for the update.

The above filter is supposed to disable the modification that the theme applies to the ampersand character and the css modifies the default style of the “special_amp” element. Please keep the css modification for now.

If you want to directly apply the default font to the ampersand, please use this css code.
```
.responsive #top .special_amp {
    font-size: 15px;
    font-weight: 400;
    font-family: 'rubik',Helvetica,Arial,sans-serif;
    font-style: normal;
}
```
Best regards,
Ismael
February 1, 2022 at 12:29 am #1338097

steridhh
Participant

Hi Ismael,

thank you for the information. I changed it according to your advice: this works.

Thanks a lot for supporting me.
Stefan

February 1, 2022 at 2:05 am #1338101

Mike
Moderator

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts