Alokai•10mo ago

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.

Typography | Storefront UI

Documentation for the Storefront UI

2 Replies

AzukenOP•10mo ago

Oh, and I've indeed imported my fonts in assets/style.scss :

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'PP Supply Sans';
  src:
    local('PP Supply Sans'),
    url(assets/fonts/PPSupplySans-Variable.ttf) format('truetype');
}

@font-face {
  font-family: 'PP Supply Mono';
  src:
    local('PP Supply Mono'),
    url(assets/fonts/PPSupplyMono-Variable.ttf) format('truetype');
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'PP Supply Sans';
  src:
    local('PP Supply Sans'),
    url(assets/fonts/PPSupplySans-Variable.ttf) format('truetype');
}

@font-face {
  font-family: 'PP Supply Mono';
  src:
    local('PP Supply Mono'),
    url(assets/fonts/PPSupplyMono-Variable.ttf) format('truetype');
}

(Fonts are properly loaded, if I change font family from chome devtools it works) Seems to be related to font-body class, in <Body /> component ; when I removed this class, theme overriding (by Tailwind) is working. But typography- classes are not working anymore, so this is not a solution.. (FYI I started my project with VSF boilerplate here https://github.com/vuestorefront/storefront-nuxt3-boilerplate) Found the issue... I tried multiple times to add the heading prop from VSF documentation, in several places in Tailwind config without success. It was a typo issue from the doc (found by searching in source code: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/sfui/typography/index.ts), it may be good to update the code accordingly. Here is a working tailwind.config.ts example:

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: {
      fontFamily: {
        headings: 'PP Supply Sans',
      },
      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: {
      fontFamily: {
        headings: 'PP Supply Sans',
      },
      screens: {
        '4xl': '1920px',
        '3xl': '1536px',
        '2xl': '1366px',
        xl: '1280px',
        lg: '1024px',
        md: '768px',
        sm: '640px',
        xs: '376px',
        '2xs': '360px',
      },
    },
  },
} as Config;

rohrig•10mo ago

Thanks for the feedback @Azuken . I'll create an issue to address this.

Gaming

Programming

Unable to override default font family