Azuken Posts - Answer Overflow

Azuken

•Created by Azuken on 2/19/2024 in #🙋｜general-help

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;

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.

5 replies

Gaming

Programming