Fonts changing font-display inside @face

[robbelroot]

Hey guys,

i'm just optimizing my app and i wanted to know if theres any way i can just add like

@font-face { font-display: swap; }

without overriding the previous @font-face settings used while using the roboto and fontawesome extras.

Best regards, Rob.

[UlrichHP]

I was wondering the exact same thing. Would be nice if someone could answer.

Any quasar devs can answer ? or tell us if it will be possible in the near future ?

Thanks 😃

[geminigeek]

+1
looking for same its important

reference link : https://web.dev/font-display/

[freddy38510]

One way to do it is to use a webpack loader.

I just tested it for Roboto fonts and it works great.

Install the string-replace-loader webpack loader:

yarn add --dev string-replace-loader

Then, add it to your webpack configuration in your quasar.config.js file:

{
  build: {
      chainWebpack(chain) {
        chain.plugin('eslint-webpack-plugin')
          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);

        chain.module
          .rule('roboto-font')
          .test(/@quasar\/extras\/roboto-font\/roboto-font\.css$/)
          .use('string-replace')
          .loader('string-replace-loader')
          .options({
            search: 'font-family: \'Roboto\';',
            replace: 'font-family: \'Roboto\';\n  font-display: swap;',
            flags: 'g',
          })
          .after('css-loader');
    },
  }
}

[stijnelskens]

Are there any solution using the vite setup?