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

help
1

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.

2

Anyone have any thoughts on this? :face_holding_back_tears:

3

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?

4

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 :frowning:

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.