Add fonticon / font to project

How do we add support for fonts in Frontity project?

For example, I have generated Icomoon font that has:
fonts folder → the actual font, ttf, eot, woff, svg
style.css → the css that is referencing these fonts

Now, where do I put my fonts and how to reference them so they load properly?

Usually, I add fonts to public/assets/fonts and then in the main css file I copy the content of styles.css that Icomoon generates and it works.

I am not sure what is the proper way to add them on Frontity project.

Thank you.

Hi, you should create style.js or fonts.js in this js file add your font face css code. For example click on following link.

Thank you for your reply.

What is the exact location of the fonts folder in the structure of the Frontity app?

I am using the Mars theme.

Should I put it into packages/mars-theme/fonts or packages/mars-theme/src/fonts or inside of the build… where exactly?

I am getting an error saying cannot find fonts at requested url http://localhost:3000/fonts/icomoon.ttf

In my theme i got this location its inside src folder

Hi @mh123

The approach suggested by @harpreet.freelance could work well. Another approach would be to use the webfontloader library.

We have a demo here that uses the webfontloader library to load Google fonts, but you can also use it to load fonts from other sources including locally installed fonts. Take a look at the custom section of their docs.

1 Like