reactioncommerce/example-storefront

Use Local Web Fonts

Opened this issue · 4 comments

Deleted user commented

Feature Name

Replace Google Font with local web font

Summary description

There's a call to some Google Web Fonts in the source code. Any such calls should be removed and a local web font added to the storefront/admin/etc.

Rationale for why this feature is necessary

Google Fonts cause cross-origin requests which are unnecessary as their CDN isn't allowed in some countries due to privacy regulations or privacy-respecting browsers. Furthermore, loading fonts from Google or any third-party can lead to a poor experience and, in the wost cases, failure to display the page depending on how font fallbacks are set-up.

Expected use cases

Users in China. Users in other countries which block Google. Users with privacy-respecting browsers like Ungoogled Chromium. Users who don't want to wait for DNS to warm up and expect fonts to load quickly from the same domain the site is hosted on.

Deleted user commented

On second thought, users can do this themselves. The storefront is incredibly fast and using Google Fonts will allow users to get up and running more quickly. Closing.

  • 👍1
janus-reith commented

Moving over the default font would be a really quick fix, I'd be open to that idea.

Deleted user commented

If I end up doing this locally, I'll loop back and sub a pull.

Deleted user commented

I've decided to use v3.1.0 for now while I wait for the next release. Here's how I addd locally-hosted webfonts without getting clever:

Create a file called WebFonts.js under /src/custom/components with the following contents:

import React, { Fragment } from "react";

const WebFonts = () => (
  <Fragment>
    <style global jsx>{`
      @font-face {
        font-family: "Source Sans Pro";
        font-style: normal;
        font-stretch: normal;
        font-weight: 400;
        font-display: fallback;
        src: local("SourceSansPro Regular"), local("SourceSansPro-Regular"),
          url(/static/fonts/SourceSansPro-Regular.woff2) format("woff2");
        unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
          U+A720-A7FF;
      }
      @font-face {
        font-family: "Source Sans Pro";
        font-style: normal;
        font-weight: 600;
        font-display: fallback;
        src: local("SourceSansPro SemiBold"), local("SourceSansPro-SemiBold"),
          url(/static/fonts/SourceSansPro-SemiBold.woff2) format("woff2");
        unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
          U+A720-A7FF;
      }
      @font-face {
        font-family: "Source Sans Pro";
        font-style: normal;
        font-weight: 700;
        font-display: fallback;
        src: local("SourceSansPro SemiBold"), local("SourceSansPro-SemiBold"),
          url(/static/fonts/SourceSansPro-Bold.woff2) format("woff2");
        unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
          U+A720-A7FF;
      }
    `}</style>
  </Fragment>
);

export default WebFonts;

Added the related font files to static/fonts directory after creating it. Then simply import the WebFonts component into the _document.js file and drop-in <WebFonts/> in the <Head> section. Note I did try do initially create a pattern similar to favicons.js with the following contents:

const fonts = [
  {
    family: "Source Sans Pro",
    weight: "400",
    display: "fallback",
    url: "/static/fonts/SourceSansPro-Regular.woff2"
  },
  {
    family: "Source Sans Pro",
    weight: "600",
    display: "fallback",
    url: "/static/fonts/SourceSansPro-SemiBold.woff2"
  },
  {
    family: "Source Sans Pro",
    weight: "700",
    display: "fallback",
    url: "/static/fonts/SourceSansPro-Bold.woff2"
  }
];

export default fonts;

But the NextJS <style global jsx> does not allow for interpolation so I ended up just doing things the simple way as shown above. Once the next version fo the storefront is released and any showstoppers are resolved I'll loop back and sub that pull I mentioned earlier — but as of now I cannot use trunk due to performance and analytics blockers.