Skip to content

Fix font imports and use a centralized style file

John Arias Castillo requested to merge 2544-fonts-loading-slow into main

Closes Related to buyer-experience#2544 (closed)

Step 1: What is changing in this MR?

Refactors

  • The style imports have been centralized in the new src/styles/_all.scss, following the Sass recommended architecture. This approach reduces the number of imports in each component, leading to improved organization and maintainability.

  • Prevent an error when the JSON.parse fails to parse the localStorage Json token is not correct

  • Previously, the fonts were loaded from an external URL, which could impact the loading performance. To address this, local fonts are now being used, and the webpack configuration has been updated accordingly. The updated configuration includes the integration of the file-loader library, enabling the building and usage of these fonts. This change ensures faster and more reliable font loading.

  • The following code allows using an alias to import the fonts using @fonts/filename.ttf instead of a relative path

configureWebpack: {
    resolve: {
      alias: {
        "@fonts": path.resolve(__dirname, "src/fonts/"),
      },
    },
  },
  • The implementation below utilizes the file-loader library to enable the correct building of fonts. This ensures that local fonts can be successfully loaded both in BE and www.
chainWebpack: (config) => {
    config.module
      .rule("fonts")
      .test(/\.(woff|woff2|eot|ttf|otf)$/)
      .use("file-loader")
      .loader("file-loader")
      .tap((options = {}) => {
        options.name = "src/fonts/[name].[ext]";
        return options;
      });
  }

Review App

Step 2: Ensure that your changes comply with the following, where applicable:

  • I, the Assignee, have run Axe tools on any updated pages, and fixed the relevant accessibility issues.
  • These changes meet a specific OKR or item in our Quarterly Plan.
  • These changes work on both Safari, Chrome, and Firefox.
  • These changes have been reviewed for Visual Quality Assurance and Functional Quality Assurance on Mobile, Desktop, and Tablet.
  • These changes work with our Google Analytics and SEO tools.
  • These changes have been documented as expected.

Step 3: Add the appropriate labels for triage

This MR will have dex-approval::2-standard automatically applied, but please update it as follows. If deciding between two levels, go with the higher of the two: https://gitlab.com/gitlab-com/www-gitlab-com/blob/master/sites/handbook/source/handbook/marketing/digital-experience/marketing-site-approval-process/index.html.md

Step 4: Tag the appropriate person for review

Depending on which label is used, you may tag the following people as a Reviewer on this MR: https://about.gitlab.com/handbook/marketing/digital-experience/marketing-site-approval-process/#step-3-tag-the-appropriate-people-for-review

Edited by John Arias Castillo

Merge request reports