Mixed tailwind + SCSS @font-face 'url' properties always become relative to current browser URL

drone1 · October 1, 2024, 1:34pm

Hi all.

So in short, I’m migrating my app’s CSS from SASS to Tailwind, and I can’t get this font to load using an absolute path anymore:

@font-face {
	font-family: 'Jura';
	font-style: normal;
	font-weight: 200;
	src: local('Jura-VariableFont_wght'),
		url('/fonts/jura/Jura-VariableFont_wght.ttf') format('truetype');
}

The font is located at https://www.mydomain.com/fonts/... as you’d expect, and on my home page (mydomain.com/) it loads the font just fine, however, as soon as I navigate to /account or /x/y/z, the browser attempts to load the font relatively, i.e. from /account/fonts/... and /x/y/z/fonts/... even though I’ve clearly got a / at the beginning of the URL.

Whether I use not quotes at all (url(/fonts/...)) or quotes doesn’t make a difference. I’d love to inspect the generated styles, but in dev, all I see for sources are tags in Chrome Inspector (no generated .css file to inspect).

To be clear, if I set my URL to /test/fonts/... I do in fact see test in the URL’s, so I know it is attempting to run that @font-face code.

Before I elaborate here, are any bells ringing for anyone? I’ve looked around on the web but haven’t found anything about why this might be happening.

Details:

I’m transitioning a project from SCSS over to tailwind via fourseven:scss in a Meteor 2.16 application, using Blaze
My tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: 'selector',
	content: ['./imports/ui/**/*.{js,html}'],
	theme: {
		extend: {
			colors: {
				accent: '#E7F256'
			},
			backgroundImage: {
				'homepage-pattern': "url('/svg/bg/qqquad.svg')"
			}
		}
	},
	corePlugins: {
		aspectRatio: false
	},
	plugins: [require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio')]
}

Meteor packages included are: fourseven:scss & minifier-css@1.6.4
Tailwind NPM packages included:

"tailwindcss": "^3.4.3",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.7",
"postcss": "^8.4.38",

My main.scss looks like this, and no matter where I move inclusion of _fonts.scss it seems to make no difference:

// Include tailwind.css stuff first, since it has a reset that our other styles will rely upon.
// The SASS styles below can override tailwind, yes, but are incredibly unlikely to do so,
// due to the naming convention we use
@tailwind base;
@tailwind components;
@tailwind utilities;

// Global
@import "{}/imports/ui/stylesheets/_fonts.scss"; // @font-face code above defined here
@import "{}/imports/ui/stylesheets/_blahblahblah.scss";
...

FWIW the issue occurs with both fourseven:scss and leonardoventurini:scss

Any help would be greatly appreciated! Thank you kindly.

drone1 · October 3, 2024, 8:38pm

Anyone have any thoughts on this?

jkuester · October 3, 2024, 9:43pm

Where is the font located within your folder structure? Under public/fonts?

Also did you try to add the folder where font is located to the tailwind content array?

drone1 · October 4, 2024, 3:57pm

Hey @jkuester, thanks for the reply!

Yes, they’re in public/fonts/<font name>/<font files>

Yes, I tried the following, but the fonts / at the beginning of url() in @font-face are still ignored and the font request goes to a relative path

tailwind.config.js:

	...
	theme: {
		extend: {
			fontFamily: {
				test: ['TEST', 'sans-serif']
			},
	...

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	@font-face {
		font-family: 'TEST';
		font-style: normal;
		font-weight: 200;
		src: local('Jura-VariableFont_wght'),
		url('/fonts/Jura-VariableFont_wght.ttf') format('truetype');
	}
}

<div class="font-test">
	...font load attempted from (/current/page/path/fonts rather than /fonts)...
</div>

Hint: If I inspect on the div with font-test noted above, I do not see the class defined at all, nor do I see any relevant font-* CSS properties.

drone1 · October 8, 2024, 1:48pm

Bump. Anyone out there?

paulishca · October 8, 2024, 2:34pm

are you sure this weight exists in your font? The Google Fonts source starts from 300.

drone1 · October 8, 2024, 5:34pm

The font-weight isn’t related here (I tried setting to 300 but it still loaded from a relative path).

I did finally get it working just now though, by giving up on the _fonts.scss file I had, moving all custom fonts into the tailwind main.css, like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	@font-face {
		font-family: 'Roboto Condensed';
		font-style: normal;
		font-weight: 100;
		src: local('RobotoCondensed-Light'),
		url('/fonts/robotocondensed/RobotoCondensed-Light.WOFF?v=10') format('woff2'),
		url('/fonts/robotocondensed/RobotoCondensed-Light.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto Condensed';
		font-style: normal;
		font-weight: normal;
		src: local('RobotoCondensed-Regular'),
		url('/fonts/robotocondensed/RobotoCondensed-Regular.WOFF?v=10') format('woff2'),
		url('/fonts/robotocondensed/RobotoCondensed-Regular.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto Condensed';
		font-style: normal;
		font-weight: bold;
		src: local('RobotoCondensed-Bold'),
		url('/fonts/robotocondensed/RobotoCondensed-Bold.WOFF?v=10') format('woff2'),
		url('/fonts/robotocondensed/RobotoCondensed-Bold.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto Mono';
		font-style: normal;
		font-weight: 100;
		src: local('RobotoMono-Thin'),
		url('/fonts/robotomono/RobotoMono-Thin.WOFF?v=10') format('woff2'),
		url('/fonts/robotomono/RobotoMono-Thin.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto Mono';
		font-style: normal;
		font-weight: 200;
		src: local('RobotoMono-Light'),
		url('/fonts/robotomono/RobotoMono-Light.WOFF?v=10') format('woff2'),
		url('/fonts/robotomono/RobotoMono-Light.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto Mono';
		font-style: normal;
		font-weight: 300;
		src: local('RobotoMono-Regular'),
		url('/fonts/robotomono/RobotoMono-Regular.WOFF?v=10') format('woff2'),
		url('/fonts/robotomono/RobotoMono-Regular.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto Mono';
		font-style: normal;
		font-weight: 400;
		src: local('RobotoMono-Medium'),
		url('/fonts/robotomono/RobotoMono-Medium.WOFF?v=10') format('woff2'),
		url('/fonts/robotomono/RobotoMono-Medium.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto Mono';
		font-style: normal;
		font-weight: 500;
		src: local('RobotoMono-Bold'),
		url('/fonts/robotomono/RobotoMono-Bold.WOFF?v=10') format('woff2'),
		url('/fonts/robotomono/RobotoMono-Bold.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}


	@font-face {
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 100;
		src: local('Roboto-Thin'),
		url('/fonts/roboto/Roboto-Thin.WOFF?v=10') format('woff2'),
		url('/fonts/roboto/Roboto-Thin.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 200;
		src: local('Roboto-Light'),
		url('/fonts/roboto/Roboto-Light.WOFF?v=10') format('woff2'),
		url('/fonts/roboto/Roboto-Light.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 300;
		src: local('Roboto-Regular'),
		url('/fonts/roboto/Roboto-Regular.WOFF?v=10') format('woff2'),
		url('/fonts/roboto/Roboto-Regular.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 400;
		src: local('Roboto-Medium'),
		url('/fonts/roboto/Roboto-Medium.WOFF?v=10') format('woff2'),
		url('/fonts/roboto/Roboto-Medium.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 500;
		src: local('Roboto-Bold'),
		url('/fonts/roboto/Roboto-Bold.WOFF?v=10') format('woff2'),
		url('/fonts/roboto/Roboto-Bold.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 600;
		src: local('Roboto-Black'),
		url('/fonts/roboto/Roboto-Black.WOFF?v=10') format('woff2'),
		url('/fonts/roboto/Roboto-Black.ttf?v=10') format('truetype');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	@font-face {
		font-family: 'Unica One';
		font-style: normal;
		font-weight: 200;
		src: local('UnicaOne-Regular'),
		url('/fonts/unicaone/UnicaOne-Regular.ttf?v=10') format('truetype');
	}

	@font-face {
		font-family: 'Jura';
		font-style: normal;
		font-weight: 200;
		src: local('Jura-VariableFont_wght'),
		url('/fonts/jura/Jura-VariableFont_wght.ttf?v=10') format('truetype');
	}
}

and modifying tailwind.config.js as such:

...
	theme: {
		extend: {
			fontFamily: {
				'roboto-condensed': ['Roboto Condensed', 'system-ui'],
				'roboto-mono': ['Roboto Mono', 'system-ui'],
				roboto: ['Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
				'unica-one': ['Unica One', 'cursive']
			},
...

I still retain the mixins I had in _fonts.scss and those are working now, plus I can do the TailwindCSS font-<font name> thing, e.g. font-jura.