A
AlokaiAzuken

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
A
Azuken•68d 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;
R
rohrig•68d ago
Thanks for the feedback @Azuken . I'll create an issue to address this.
Want results from more Discord servers?
Add your server
More Posts
storefront-nuxt3-boilerplate startup issuesI have downloaded the nuxt3 boilerplate and i'm attempting to start it up from the root directory, hI got this error when i try to register an accountMy project is in Vsf1 and backend is in magento2 when i try to register an account i got an this typAre there any storefront templates out there I can use for demonstration purposes?I am working on a closed source back end offering similar to PrestaShop in functionality. One of theduring this temporary transition fase, how to?What is the best way, to get up and running using vsf2, magento, nuxt3, storefront-ui using tailwindHow to use vsf nuxt3 version?i just watched new workshop where core team was using nuxt3 with vue storefront, now i m curious aboUsage of SDK in frontendI'm unable to use sdk in frontend, I added one API endpoint in sdk and want to fetch data and displanuxt vuestorefrontuiCan I use vuestorefrontui with another ui library like ui.nuxt? I need more reusable components likeHow to Deploy Vue Project in Nuxt to my Ubuntu Serveri configured my server using pm2 and apache2 but when loading using the ip address it doesn't fetch Canonical Links have forward slash encoded which breaks the pageHi. The Canonical Links that get added to the head have the forward slashes encoded to `%2F` You caI got an error when i try to start my vue storefront projectHello @skirianov @rohrig i got an error when i try to start my VSF1 project please check once