Azuken
Azuken
PostsComments
AAlokai
Created by Azuken on 2/19/2024 in #🙋｜general-help
Unable to override default font family
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;
5 replies
AAlokai
Created by Azuken on 2/19/2024 in #🙋｜general-help
Unable to override default font family
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)
5 replies
AAlokai
Created by Azuken on 2/19/2024 in #🙋｜general-help
Unable to override default font family
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)
5 replies