Lokally hosted, selfmade font isn't shown up

amtenbrink · September 2020

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.

https://intranet.cabeje.han-solo.net/test/

(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!

Pablo · September 2020

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

amtenbrink · September 2020

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!

amtenbrink · September 2020

...and somehow it doesn't work too.

i really don't get it.

any other advice?

Thanks!

Pablo · September 2020

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.

https://prnt.sc/uhl8dg

Thanks

amtenbrink · September 2020

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!

Pablo · September 2020

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

amtenbrink · September 2020

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!

amtenbrink · September 2020

... 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";

}

Pablo · September 2020

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

Lokally hosted, selfmade font isn't shown up

Comments

This website uses cookies