Add fonticon / font to project

mh123 · 26 February 2021 14:45

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.

harpreet.freelance · 26 February 2021 18:40

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.

github.com

harpreet9629/frontity-theme/blob/master/packages/twentytwenty-theme/src/components/styles/font-faces.js

import { Global, css, connect } from "frontity";
import InterMedium from "../../fonts/inter/Inter-Medium.woff2";
import InterBold from "../../fonts/inter/Inter-Bold.woff2";
import InterSemiBold from "../../fonts/inter/Inter-SemiBold.woff2";
import InterMediumUS from "../../fonts/inter/Inter-Medium-US-ASCII.woff2";
import InterBoldUS from "../../fonts/inter/Inter-Bold-US-ASCII.woff2";
import InterSemiBoldUS from "../../fonts/inter/Inter-SemiBold-US-ASCII.woff2";
import InterMediumLatin from "../../fonts/inter/Inter-Medium-LATIN.woff2";
import InterBoldLatin from "../../fonts/inter/Inter-Bold-LATIN.woff2";
import InterSemiBoldLatin from "../../fonts/inter/Inter-SemiBold-LATIN.woff2";

const fonts = {
  "us-ascii": [InterMediumUS, InterSemiBoldUS, InterBoldUS],
  latin: [InterMediumLatin, InterSemiBoldLatin, InterBoldLatin],
  all: [InterMedium, InterSemiBold, InterBold],
};

const FontFace = ({ state }) => {
  const font = fonts[state.theme.fontSets] || fonts["all"];

This file has been truncated. show original

mh123 · 26 February 2021 20:14

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

harpreet.freelance · 26 February 2021 20:38

In my theme i got this location its inside src folder

mburridge · 1 March 2021 11:45

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.

s74 · 20 March 2022 16:28

Hi,
I have tried to load Adobe Fonts instead of Google fonts. But not getting it to work. Could you please add some more detailed information on how to load Adobe fonts or other font files included in the project files instead?
Thanks.

rauljayson96 · 21 December 2023 11:54

Place Fonts in the Correct Directory:

Create a fonts directory within your theme’s src folder: src/fonts .
Place your font files (TTF, EOT, WOFF, SVG) inside this directory.

Import Fonts in a Global Component:

Create a Global component within your theme’s src folder: src/Global.js .
Import the css function from frontity .
Use the @font-face rule to define your font families within the css function