Lokally hosted, selfmade font isn't shown up

Hi,

i generated a font (via App icomoon.io) out of my own symbols.
i integrated it with @fontface (as i usually inegrate all other fonts locally).

but somehow the font isn't shown. it just displays the utf8 charakter instead {here §).

i wrote to icomoon, they told me:
"It is possible that the directory you copied the fonts to isn’t mapping to https://www.lebenshilfe-he-wf.de/test-symbole/fonts/
Your should check the routing configuration of your server/theme."
...because the font couldn't be found which was displayed in the inspektor of the browser.


I talked to my hoster, he generated an alias (i'm afraid i don't know what exactly that means) because the site was searching for the font in
"test/fonts/FrutiLTLig.woff" instead to search in the fonts folder in the child theme. now the font seems to be found, but still doesn't show up.

(login credentials was sent to you via private message, do you still have it?)

Do you have any idea, how to handle this?
Sorry, this is really complicated. i hope you could follow...

Thanks a lot!

Comments

  • Hello,
    Please upload your font using our built-in custom font functionality.
    Theme Options > Fonts > Custom
    It will be much easier and faster than using CSS coding :)

    Thanks
  • Hi,

    ok, but does that work for all browsers?
    there are just two upload options (.woff and .ttf) but i have four font files (.woff2 and .eot)...

    Thanks!
  • ...and somehow it doesn't work too.

    i really don't get it.

    any other advice?

    Thanks!
  • Well, are you sure that your font is created correctly? Can you insert and display it on static page?
    I tested the Custom Fonts options and it works fine, you have to select your custom font in the one of the elements in the theme.

    Thanks
  • hmmm... but i don't want it to be used as regular font.
    i just need a few symbols which i would like to display as icons...
    something like this...

    .xxx:before {
        font-family: abc !important;
        content: "\61";
    }

    but i will have a try with creating the font again and testing it on static site...

    Thanks!
  • Well, in this case you should use the @font-face rule.
    It should work, if you properly create the CSS code and insert it in the Theme Options > Custom CSS & JS > CSS

    Give me a response about the results with the static page.
    Thanks
  • Hi,

    here my response on static website:

    it's not working as well. i think i'm doing s. th. wrong...

    https://cadera.de/aaa-test.htm (you can see the "& Test" in the middle of the page).

    I will keep on trying and give you the solution if i find it... :-)

    Thanks for your help!
  • ... now it works! i actually am not quite sure why.

    i generated the font again and selected a raster (16x16) in icomoon.io app, which i didn't do before and i added the font-family of the font to the class of the ":before"...

    .xxx:before {
        font-family: abc !important;
        content: "\61";
    }
  • Glad to hear that you solved it out :)
    I'm not keen on with the icomoon app, but surely, there was a problem with configuration of the icon.

    If you have some further questions, feel free to ask.
    thanks
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.