Setting a custom font?

augdust2 years ago

16

Hi, I would like to white-label my Payload app a bit with custom colors, logo and a typeface. Colors and logos are pretty well documented, but I'm struggling a bit with getting custom fonts to work. We have our own font files, so no Google Fonts or similar, they will be hosted alongside the application as locally available files.

Trying to import the files using @font-face in a custom CSS file, but I get a

Module build failed

error when it tries to load the file.

Error: Can't resolve ´./fonts/%filename.woff2%' in '%path-to-project%/node_modules/enhanced-resolve/lib/Resolver.js:369:18)

Some quick googling suggests I need to tell Webpack to allow/handle fontfile-loading somehow, but I'm not sure how I'd go about doing that in my Payload app

• 

  m.naeem666222 years ago

  Error: Can't resolve ´./fonts/%filename.woff2%' in '%path-to-project%/node_modules/enhanced-resolve/lib/Resolver.js:369:18)

  
  

  It means that your file not foud in the pasth where is has to be expected.
  

  
  

  Because after the compilation of the app only imported files attached with the directory and found in the assets.

  
  

  For example: you have a file

  logo.png

  in your directory

  src/components/assets

  and not imported yet in any react component, it will not attached with the assets after compilation i mean in your build folder..

• 

  augdust2 years ago

  i have my fonts located in

  src/assets/fonts/%fontfile.woff2%

  , and I try to import them in my CSS like so:

  
  
  

  @font-face {
      font-family: 'Font-Name';
      src: url('../assets/fonts/Font-Name.woff2') format('woff2');
  }

• 

  m.naeem666222 years ago

  because importing in css files not work... after compilation they dont keep the files attached to the assets.

  
  

  You have to import it in app starting point like

  index.js

  or

  index.jsx

  file or

  App.js

  or

  App.jsx

  file.

  
  
  

  assuming if your file path is

  /src/assets/fonts/font-name.woff2

  .

  
  

  Your importing line in app starting point would be

  
  import "./src/assets/fonts/font-name.woff2"
  

  And then your linking in css files would be:

  
  

  @font-face {
      font-family: 'Font-Name';
      src: url('./src/assets/fonts/Font-Name.woff2') format('woff2');
  }

  
  
  

  Note: Path of the files may be vary according to your app file structure...

• 

  augdust2 years ago

  thanks, will give this a shot tomorrow :)

• 

  m.naeem666222 years ago

  Okay... tell me later this solution worked for you or not...

• 

  augdust2 years ago

  Tried importing the font in

  payload.config.ts

  like so:

  import './assets/fonts/fontName.woff2';
  
  

  Then in my css-file:

  @font-face { font-family: 'FontName'; src: url('../assets/fonts/fontName.woff2') format('woff2');
  
  

  this produces the same error,

  Can't resolve '../assets/fonts/fontName.woff2'
  
  

  also tried moving my CSS-file up one level so the path to the font-file would be the same,

  ./assets/fonts/fontName.woff2

  for both imports

• 

  m.naeem666222 years ago

  Okay just remove/comment the font-face block... but not the import line in starting point of your app.. And make a build of your app.. after creating the build locate the font file where it has been kept???

  
  
  

  It is just for debugging purpose... "That's how i debug"... 🥲

• 

  augdust2 years ago

  it seems to be located in

  dist/assets/fonts/fontName.woff2

  
• 

  m.naeem666222 years ago

  Okay...

  
  

  try the path with "assets/fonts/fontName.woff2"

• 

  augdust2 years ago

  same error, can't resolve path. I'll just live with default font for the time being, thanks for your time :)

• 

  m.naeem666222 years ago

  Try with one of these.I hope it will work for you...

  
  https://nextjs.org/docs/pages/api-reference/components/font
  https://blog.logrocket.com/next-js-font-optimization-custom-google-fonts/#adding-custom-fonts-next-js
• 

  simka09972 years ago

  @170674545965924352

  did you figure out how it works?

• 

  augdust2 years ago

  nope :)

• 

  simka09972 years ago

  Too bad 😀

  
  
  

  Anyone else has an idea? 🤔

• 

  augdust2 years ago

  im waiting on 3.0 to see if its any easier then

  
• 

  simka09972 years ago

  Yeah let's wait and hope for it