theming -fontFamily variables

[akaflipper]

Hi,
following @simonswiss fantastic video series on YouTube and trying to extend the theming with CSS Variables episode - https://www.youtube.com/watch?v=MAtaT8BZEAo&t=942s - to cover fontFamily theming ... the bg, text colours & opacity work great .. but I can't get fontFamily to 'variablise'. Not sure if its possible but here's what i've got:

https://play.tailwindcss.com/Umm8NjbKaL

/resources/css/app.css - creating variables for font styles eg: --font-sans: ['MaisonNeue-Book','Arial','sans-serif']; etc

tailwind.config.js - referencing them within a theme->skin

test blade - calling font-skin-display and font-skin-display

No fonts appear to be imported/referenced within generated /public/css/app.css file and i think that's my problem ...

I've tried a bunch of different ways to define the variables and reference them - --font-serif, in double quotes to escape chars etc ... but no joy.

thanks a bunch!
g

[simonswiss]

Hey!

Unfortunately, the fontFamily key in Tailwind doesn't support nested objects (like fontFamily: { skin: {} }) like colors do in my video.

You can still use the skin prefix, but you'd need to define it like so:

theme: {
  extend: {
    fontFamily: {
      'skin-serif': 'var(--font-serif)'
    }
  }
}

Also, since the config file will literally point to the CSS variable (instead of parsing a JS array), you should define your font families with the CSS syntax instead, in your CSS file:

:root {
  --font-serif: 'MaisonNeue-Book', arial, sans-serif;
}

That should work! 👍

[akaflipper]

Awesome thanks @simonswiss .. got it working! very cool! appreciate the help!