I'm trying to create a custom font in a reactive web app which I can use for icons & style through CSS. I've read through this post and been through the steps in this guide but can only return a blank square.

I've imported to resources, deployed to target directory, added all the CSS form IcoMoon and edited the URLs to match in the src line of the CSS (these are definitely correct as when I edit the resource target directory, it update the CSS automatically)

I've added it through the container method & added the style class.

In the Demo.html of the IcoMoon download here is what my icon should look like, but I only ever get back the box inside the blue circle. I've also added screenshots of resources, CSS & container. Can anyone see anything that's wrong?

Here are my resources

Here is my CSS

& Finally here's the container

Solution

Hi Steve,

Can you please try with making fonts public properties to yes,and make a separate css file for icon moon fonts and place it in resource folder and link the css file .Please try this and let me if it works.


Thanks

AD  

Solution

Hi Steve,

Can you check in the browser Developer Tools if it was able to load the font resources? In the network tab you should be able to see a (successful) request for the font file you are trying to use, and if there are any errors they should show up in the Console tab.

Please share with us your findings as they may be able to shed some light on what's going wrong!

Thanks both - that has now fixed it. Marking as public worked; the trick about checking network tab for loaded files was very useful and made me realise that they weren't in fact loading (and neither was my other custom font which I hadn't realised wasn't actually working! Double win!)