Split css to use <link rel=preload> for fonts

[ahoiroman]

Hello everybody,

I am using Tailwindcss with VueJS and Laravel-Mix (Webpack).

I'd like to use custom local fonts.

This is how I included them:

@layer base {

    /* ibm-plex-mono-100 - latin */
    @font-face {
        font-family: 'IBM Plex Mono';
        font-style: normal;
        font-weight: 100;
        src: local('IBM Plex Mono Thin'), local('IBMPlexMono-Thin'),
        url('../fonts/ibm-plex-mono-v5-latin-100.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-100.woff') format('woff'), /* Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/ibm-plex-mono-v5-latin-100.svg#IBMPlexMono') format('svg'); /* Legacy iOS */
        font-display: swap;
    }
    /* ibm-plex-mono-200 - latin */
    @font-face {
        font-family: 'IBM Plex Mono';
        font-style: normal;
        font-weight: 200;
        src: local('IBM Plex Mono ExtraLight'), local('IBMPlexMono-ExtraLight'),
        url('../fonts/ibm-plex-mono-v5-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-200.woff') format('woff'), /* Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/ibm-plex-mono-v5-latin-200.svg#IBMPlexMono') format('svg'); /* Legacy iOS */
        font-display: swap;
    }
}

Now my question: For performance reasons I'd like to preload my fonts using <link rel=preload>. Is it possible to split the generated css file into app.css and fonts.css?

[ahoiroman]

I gave some more thought to this, but still don't get an idea:

This is my current scenario:

I included the font this way:

@layer base {

       /* lato-300 - latin */
    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 300;
        src: local('Lato Light'), local('Lato-Light'),
        url('../fonts/lato-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v16-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v16-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
        font-display: swap;
    }
    /* lato-300italic - latin */
    @font-face {
        font-family: 'Lato';
        font-style: italic;
        font-weight: 300;
        src: local('Lato Light Italic'), local('Lato-LightItalic'),
        url('../fonts/lato-v16-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v16-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v16-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v16-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */
        font-display: swap;
    }
}

Now I process my css using Laravel-mix:

const {EnvironmentPlugin} = require ('webpack');
const mix = require ('laravel-mix');
const glob = require ('glob');
const path = require ('path');
const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
const ChunkRenamePlugin = require ('webpack-chunk-rename-plugin');
const TargetsPlugin = require('targets-webpack-plugin');

require ('laravel-mix-tailwind');
require('laravel-mix-polyfill');
require('laravel-mix-brotli');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig ({
	output: {
		chunkFilename: 'js/chunks/[name].[chunkhash].js'
	},
	plugins: [
		new CleanWebpackPlugin ({
			cleanOnceBeforeBuildPatterns: ['js/chunks/**/*']
		}),
		new EnvironmentPlugin ({
			BASE_URL: '/'
		}),
		new ChunkRenamePlugin ({
			initialChunksWithEntry: true,
			'/js/app': 'js/app.js',
			'/js/vendor': 'js/vendor.js',
		}),
	],
	module: {
		rules: [
			{
				test: /node_modules(?:\/|\\).+\.js$/,
				loader: 'babel-loader',
				options: {
					presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
					plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
					babelrc: false
				}
			},
			{
				enforce: 'pre',
				test: /\.(js|vue)$/,
				loader: 'eslint-loader',
				exclude: /node_modules/
			}
		]
	},
	resolve: {
		alias: {
			'@': path.join (__dirname, 'resources'),
			'node_modules': path.join (__dirname, 'node_modules')
		}
	},
});

mix.js ('resources/js/app.js', 'public/js')
.postCss ('resources/css/app.css', 'public/css')
.tailwind ('./tailwind.config.js');

if (mix.inProduction ()) {
	mix
	.version ()
	.polyfill({
		enabled: true,
		useBuiltIns: "usage",
		targets: "> 0.25%, not dead",
		corejs: 3
	})
	.brotli();
}

This is what my processed css looks like:

@font-face {
  font-family: 'Lato';

  font-style: italic;

  font-weight: 300;

  src: local('Lato Light Italic'), local('Lato-LightItalic'),
        url(/fonts/lato-v16-latin-300italic.woff2?a21767e20d27a9c06007c981a8e5f827) format('woff2'),  url(/fonts/lato-v16-latin-300italic.woff?8e90b967ea69fc68b130d36cc34d41c0) format('woff'),  url(/fonts/lato-v16-latin-300italic.ttf?329d60785944501134891f948f41c001) format('truetype'),  url(/fonts/lato-v16-latin-300italic.svg?17e346950dce164549968b7b93d48f2d#Lato) format('svg'); /* Legacy iOS */

  font-display: swap;
}

Somehow I need to find a way to include those versioned font-calls to my prefetching.

My first attempt was to iterate over all files in public/fonts, but of course I don't get the versioned url:

@foreach(File::files(public_path('fonts')) as $font)
    <link rel="preload" href="/fonts/{{$font->getFilename()}}" as="font">
@endforeach

An idea that I had was to add the urls to mix-manifest.json, but I'm kinda stuck here :-(

[styxlab]

I had the same problem, fonts were loaded twice. What fixed it for me was adding the crossorigin attribute to the preload link, e.g.:

<link rel="preload" as="font" href="/fonts/inter/Inter-roman.var-latin.woff2?v3.19" type="font/woff2" crossorigin="anonymous">

You can then keep your @font-face declaration as is. Only make sure the url in the @font-face matches the one in the preload link.

[codewarnab]

what to do about this warnig in react
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

[indev-at]

Try:

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap">
</noscript>