Custom Font for replaced burger icon not showing

[cndrk]

Hello,
I’ve replaced the burger icon with a text (Navigation). And I want this to use my custom font as others headers etc.
On desktop, everything works fine. On my iPhone, that word uses a sans-serif font. When I click and open the submenus, I see the items there also use my custom font. So it is only that replaced burger icon having the problem.
Here is the CSS I am using:

.x-btn-navbar i::before {
content: "NAVIGATION";
font-family: "TRBalloon", sans-serif;
}

Would you mind taking a look?
Thanks

[ruenel]

Hi @cndrk,

Thanks for writing in!

You added this custom css:

@font-face{
    font-family:"Custom Font Family";
    src:url(https://www.bermuda-doener.de/wp-content/uploads/TRBalloon.woff) format('woff');
    font-weight:400;
    font-style:regular
}

Custom Font Family needs to be change to TRBalloon. And by the way, you must also include *.ttf, *.woff2, *.eot, etc. to make sure that the font family will display in all browser.

• https://css-tricks.com/snippets/css/using-font-face/

Hope this helps. Please let us know how it goes.

[cndrk]

Solved!
Thank you very much and have a nice sunday…

[ruenel]

You’re welcome!
We’re glad we were able to help you out.