Add publicly accessibly font file for easy import into projects

[noClaps]

Inter uses a font file at https://rsms.me/inter/inter.css to host the Inter font files for everyone using the project. This makes it really easy to use it, since it's a simple @import into your CSS file to use. I'd like if this could also be done for Server Mono.

The code in globals.scss:

www-server-mono/global.scss

Lines 1 to 9 in af527d3

	@font-face {
	font-family: 'Mono';
	src: url('https://intdev-global.s3.us-west-2.amazonaws.com/public/internet-dev/0a26b101-f97b-41c3-a0cd-205358c7b3f7.woff') format('woff');
	}
	@font-face {
	font-family: 'MonoSlanted';
	src: url('https://intdev-global.s3.us-west-2.amazonaws.com/public/internet-dev/3bb6457d-ca97-4038-87e4-f1333e0656e9.woff') format('woff');
	}

should be copied/separated into a separate CSS file that will not be bundled into the static output. I'm not familiar with Next.js but I imagine this would be in the public/ directory.

The code should be:

@font-face {
    font-family: 'Mono';
    font-style: normal;
    font-display: swap;
    src: url('https://intdev-global.s3.us-west-2.amazonaws.com/public/internet-dev/0a26b101-f97b-41c3-a0cd-205358c7b3f7.woff') format('woff');
}

@font-face {
    font-family: 'MonoSlanted';
    font-style: italic;
    font-display: swap;
    src: url('https://intdev-global.s3.us-west-2.amazonaws.com/public/internet-dev/3bb6457d-ca97-4038-87e4-f1333e0656e9.woff') format('woff');
}

Also, since the woff2 files are available, and it's only IE that doesn't support it, you can change the font file and format to woff2. You can also list multiple url and format values inside src if you'd like to have both or multiple formats. The user's browser will pick the best supported format automatically.

@font-face {
    /* ... */
    src: url("[WOFF2 file url].woff2") format("woff2"), url("[WOFF file url].woff") format("woff")
}

These can also be pointed to the locally built files rather than to AWS, but that's up to you. Simply adding the font files to the public/ directory, or whatever copies the files directly to the output, should work. The benefit for users is that it's one less request they have to make to load the font, since with the current setup it would first make a request to https://servermono.com to fetch the CSS, and then make a request to amazonaws.com to fetch the font files.

You can see Inter's CSS file linked above for reference on how this can be set up.

[noClaps]

Also, you should probably change the font-name to "ServerMono" and "ServerMonoSlanted". Better yet, since you've defined the font-style in the @font-face, you can give both of them the same name, like "ServerMono", and the browser will automatically pick the appropriate font file to render depending on the font style needed.

[jimmylee]

Thanks @noClaps! These are all very valid points. Your naming conventions really helped me think about this when I put those fonts on a CDN (or someone else does it for us)

The current setup we have is optimal for NextJS, when we deploy we deploy a server, and the generation of of our build folder happens in real time, nothing is used as is. I know this isn't obvious when you look at a NextJS repository, but everything is very optimized in the final asset delivery in the client.

The /public directory would allow us to serve the assets locally, but also taxes these little CPU servers. So we're use our public amazon bucket for public files (everything is licensed for sharing), and it is okay for now, but we need a better solution.

[noClaps]

Where are you hosting it? A lot of services give you free static site hosting, and that usually comes with a lot of bandwidth. I'm also not sure why the CPU would be involved in serving static files. If the website isn't static, however, then I think you should consider making it static, since there's nothing on there that requires it to be SSR, from what I can tell.

Alternatively, you can host the font and CSS files on a CDN that points to a subdomain, like cdn.servermono.com. The reason it's better to have them coming from the same site is that when browsers make a request to an external resource, they usually hold the connection open for a bit in case any further requests are made to that same domain. These further requests usually end up being faster than the initial query since it doesn't need to make that initial connection again.

For example, if the font and CSS files are being served from cdn.servermono.com, then the initial slow request will be made to cdn.servermono.com to get the CSS file, and then faster requests will be made again to get the font files. However, if the font files are on amazonaws.com then a new initial slow request must be made to AWS to get the font files. For most people, it's not that big of a difference, but for people on slower networks, that difference becomes somewhat noticeable, especially if they aren't in the Western USA. Good CDNs can optimise this to serve files from servers near wherever the user is.

Plus, the files coming from the official servermono.com domain are more trustworthy than those coming from some AWS URL.

[jimmylee]

We deploy our sites between Render and Vercel. We don't use a static host at the moment but your comment has made me consider doing it, since even some of our clients want static sites.

I do need to setup a CDN for all of our assets, this is a good point.

[noClaps]

Both Render and Vercel do static site hosting. I've hosted static sites on Vercel before, and I'm currently hosting all of my static sites on Render.

I believe this is the value you need to change in your configuration to make your current site static.

[caidanw]

@noClaps I've created solutions for static hosting, changes can be found in #26 and #27

I've also updated the docs to show how to easily use the static hosting: https://github.com/internet-development/www-server-mono#cdn-hosted