Search code examples
reactjselectronelectron-builderelectron-forge

How to preload fonts in Electron/React app?

I’m using electron-forge and can’t figure out how to make paths relative to build.

Following snippet works in development mode, but not in productions mode.

<!DOCTYPE html>
<html lang="en" data-color-scheme="auto">
  <head>
    <link
      rel="preload"
      href="/c5c3959c04004102ea46.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="/535bc89d4af715503b01.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <meta charset="utf-8" />
    <title>Test app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

These are the errors thrown:

index.html:1          GET file:///c5c3959c04004102ea46.woff2 net::ERR_FILE_NOT_FOUND
index.html:1          GET file:///535bc89d4af715503b01.woff2 net::ERR_FILE_NOT_FOUND

Thanks for helping out!

Solution

  • As your Electron application will be built in a different directory, run by your user(s) on any drive in any directory on any OS of their choosing, reference to file paths must be relative (not absolute).

    Below are examples of what your <link> href would look like depending on a typical directory structure.

    Example 1

    Flat render-process directory structure.

    Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── index.html
 |       ├── c5c3959c04004102ea46.woff2
 |       └── 535bc89d4af715503b01.woff2
 └── package.json

    index.html (render process)

    <link rel="preload" href="c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

    Example 2

    Downwards render-process directory structure.

    Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── index.html
 |       └── fonts
 |           ├── c5c3959c04004102ea46.woff2
 |           └── 535bc89d4af715503b01.woff2
 └── package.json

    index.html (render process)

    <link rel="preload" href="fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

    Example 3

    Up / down render-process directory structure.

    Note use of the ../

    This moves you up one folder level.

    Up from html (folder) -> to render-process (folder).

    Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── html
 |       |   └── index.html
 |       └── fonts
 |           ├── c5c3959c04004102ea46.woff2
 |           └── 535bc89d4af715503b01.woff2
 └── package.json

    index.html (render process)

    <link rel="preload" href="../fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

    Example 4

    An even deeper up / down render-process directory structure.

    Note use of the ../../

    This moves you up two folder levels.

    Up from main (folder) -> to html (folder) -> to render-process (folder).

    Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── html
 |       |   └── main
 |       |       └── index.html
 |       └── css
 |           └── fonts
 |               ├── c5c3959c04004102ea46.woff2
 |               └── 535bc89d4af715503b01.woff2
 └── package.json

    index.html (render process)

    <link rel="preload" href="../../css/fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../../css/fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />