Multiple custom fonts from same family

[belaziv]

I have a few fonts of Rubik family and I would like to load them as shown in the example But this code loads only one font :(

ViteFonts({
  custom: {
    families: {
      Rubik: './assets/fonts/Rubik*'
    }
  }
})

This is the only ugly way it has worked for me so far

ViteFonts({
  custom: {
    families: [
      {
        name: 'Rubik-Medium',
        local: 'Rubik-Medium',
        src: './assets/fonts/Rubik-Medium.ttf'
      },
      {
        name: 'Rubik-Regular',
        local: 'Rubik-Regular',
        src: './assets/fonts/Rubik-Regular.ttf'
      },
      {
        name: 'Rubik-Bold',
        local: 'Rubik-Bold',
        src: './assets/fonts/Rubik-Bold.ttf'
      },
      {
        name: 'Rubik-Light',
        local: 'Rubik-Light',
        src: './assets/fonts/Rubik-Light.ttf'
      }
    ]
  }
})

[espensgr]

This worked for me:

custom: {
  families: [{
    name: 'Mainson Neue',
    src: './src/fonts/regular/*',
  },
  {
    name: 'Mainson Neue Extended',
    src: './src/fonts/extended/*',
  }],
},

[belaziv]

OK, That's what I did and I see that the fonts are indeed loaded :+1:

custom: {
  families: [{
    name: 'Rubik',
    src: './src/assets/fonts/Rubik/*'
  }],
},

In src/assets/fonts/Rubik/ directory there are a few fonts (Rubik-Medium.ttf / Rubik-Regular.ttf / etc.) But when I tried to use a specific font, for example fontFamily: 'Rubik-Medium', no Rubik's font was shown, and when I tried fontFamily: 'Rubik' then the Rubik-Regular font is displayed

What is the correct way to use it? Thanks

[espensgr]

Well i guess you should see a font.css with the @font-face stacked within the family added to your html. The Medium, Light, Regular and Bold are added as versions of the font, so when you use font-family: "Rubik" it uses the regular version, and if you use <bold>This is bold</bold> it uses the bold version of the font. This i how @font-face is built, the browser switches between versions based on css og html elements. This plugin reads the filenames i belive and adds @font-face attributes based on that. So the Bold gets font-weight: 700;, italic gets font-style:italic; and bold-italic gets both.

Dont know if that made things any better 😆