Replies: 9 comments 5 replies
-
This reminds me of https://seek-oss.github.io/capsize/ Would make a nice Twind plugin. |
Beta Was this translation helpful? Give feedback.
-
For anyone looking for a workaround... I added my own utilities for the
Reminder: these values must be supported by your variable font and the This implementation isn't perfect because I'm only able to use a single font variation. The better solution would be to use CSS variables like in web.dev's example. |
Beta Was this translation helpful? Give feedback.
-
I haven't found the need to add custom utilities in the current version of Tailwind( as of v3.0.24) This is an example of a solution that I've found that works for me: In @tailwind base;
@tailwind components;
@tailwind utilities;
/* Variable Fonts */
@supports (font-variation-settings: normal) {
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/variable/Nunito-VariableFont_wght.woff2") format("woff2");
font-named-instance: "Regular";
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/variable/Nunito-Italic-VariableFont_wght.woff2")
format("woff2");
font-named-instance: "Italic";
}
}
/* Static Fonts */
@supports not (font-variation-settings: normal) {
@font-face {
font-named-instance: Regular;
font-display: swap;
font-family: Nunito;
font-style: normal;
font-weight: 400;
src: url("/fonts/Nunito-Regular.woff2") format("woff2");
}
@font-face {
font-named-instance: Italic;
font-display: swap;
font-family: Nunito;
font-style: italic;
font-weight: 100 900;
src: url("/fonts/Nunito-Italic.woff2") format("woff2");
}
@font-face {
font-named-instance: SemiBold;
font-display: swap;
font-family: Nunito;
font-style: semibold;
font-weight: 600;
src: url("/fonts/Nunito-SemiBold.woff2") format("woff2");
}
@font-face {
font-named-instance: SemiBoldItalic;
font-display: swap;
font-family: Nunito;
font-style: italic;
font-weight: 600;
src: url("/fonts/Nunito-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
font-named-instance: Bold;
font-display: swap;
font-family: Nunito;
font-style: bold;
font-weight: 700;
src: url("/fonts/Nunito-Bold.woff2") format("woff2");
}
@font-face {
font-named-instance: BoldItalic;
font-display: swap;
font-family: Nunito;
font-style: italic;
font-weight: 700;
src: url("/fonts/Nunito-BoldItalic.woff2") format("woff2");
}
}
:root {
@apply antialiased font-sans;
} In const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./app/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
}; Hope this helps. |
Beta Was this translation helpful? Give feedback.
-
I trust you will post more like that later on. |
Beta Was this translation helpful? Give feedback.
-
I just had to find a solution for variable fonts coz a project I am building is using an Adobe font which only uses variable weights. @corywatilo solution didn't work for me on Tailwindcss 3.3.2 so found the following solution using the fontFamily extend in the tailwind config file. I would love to see a better solution if anyone knows of one.
|
Beta Was this translation helpful? Give feedback.
-
The only solution worked for me is writing it as a plugin. build/tailwind/plugins/fontVariationSettingsPlugin.js const plugin = require('tailwindcss/plugin')
module.exports = plugin(
function ({ addUtilities }) {
addUtilities({
'.font-thin': {
fontWeight: 100,
fontVariationSettings: '"wght" 100'
}
})
addUtilities({
'.font-extralight': {
fontWeight: 200,
fontVariationSettings: '"wght" 200'
}
})
addUtilities({
'.font-light': {
fontWeight: 300,
fontVariationSettings: '"wght" 300'
}
})
addUtilities({
'.font-normal': {
fontWeight: 400,
fontVariationSettings: '"wght" 400'
}
})
addUtilities({
'.font-medium': {
fontWeight: 500,
fontVariationSettings: '"wght" 500'
}
})
addUtilities({
'.font-semibold': {
fontWeight: 600,
fontVariationSettings: '"wght" 600'
}
})
addUtilities({
'.font-bold': {
fontWeight: 700,
fontVariationSettings: '"wght" 700'
}
})
addUtilities({
'.font-extrabold': {
fontWeight: 800,
fontVariationSettings: '"wght" 800'
}
})
addUtilities({
'.font-black': {
fontWeight: 900,
fontVariationSettings: '"wght" 900'
}
})
}
) tailwind.config.js module.exports = {
plugins: [
require('./build/tailwind/plugins/fontVariationSettingsPlugin.js')
]
} |
Beta Was this translation helpful? Give feedback.
-
When using solutions with custom font-weight utilities that apply both The purpose of this is to prevent Screen.Recording.2024-02-16.at.2.53.21.PM.movThis undesirable behavior disappears with |
Beta Was this translation helpful? Give feedback.
-
For those who use Variable Fonts and have both WDTH and WGTH axes (width and weight), you may want to adjust this (scss) snippet:
This is how its being used:
|
Beta Was this translation helpful? Give feedback.
-
For me, simply adding the tech('variations') in the font src worked
Got it from https://web.dev/articles/variable-fonts#font-variation-settings-inheritance |
Beta Was this translation helpful? Give feedback.
-
I recently switched a project to the Inter variable font, and then noticed that nothing was bold anymore, as
font-weight: 700;
(or any other value for font-weight) has no effect with variable fonts, it seemsfont-variation-settings: 'wght' 700;
is needed specifically to adjust font weight for variable fonts.While I don't quite understand why browser do not use font-weight for variable fonts, it seems to be a consistent behavior (tested with Chrome and Firefox). A solution Tailwind could provide for this problem is to have an opt-in to add
font-variation-settings
in addition tofont-weight
when any of the font-weight utilities is used - opt-in because adding those is only necessary when a project is mainly using a variable font, which is still relatively rare, but with the now reasonable browser support usage of variable fonts will probably increase.Beta Was this translation helpful? Give feedback.
All reactions