AlokaiA
Alokai•2y ago
Azuken

Unable to override default font family

Hi everyone, I'm trying to override Storefront UI Typography default font family, I've tried many variations but only Tailwind seems to apply it, typography classes is still using "Red Hat Display" font... Am I missing something ?

My TailwindCSS configuration :

import sfTypography from '@storefront-ui/typography';
import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';
import type { Config } from 'tailwindcss';

export default {
  presets: [tailwindConfig],
  plugins: [sfTypography],
  content: ['./**/*.vue', './node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
  theme: {
    fontFamily: {
      sans: 'PP Supply Sans',
      mono: 'PP Supply Mono',
    },
    extend: {
      screens: {
        '4xl': '1920px',
        '3xl': '1536px',
        '2xl': '1366px',
        xl: '1280px',
        lg: '1024px',
        md: '768px',
        sm: '640px',
        xs: '376px',
        '2xs': '360px',
      },
    },
  },
} as Config;


https://docs.storefrontui.io/v2/vue/customization/typography.html

This is the only documentation I found and it does not work.
Typography | Storefront UI
Documentation for the Storefront UI
Was this page helpful?