Documenter.jl Replace `font-family: "Lato Medium"` with `font-family: "Lato"`

The CDN that Documenter.jl gets Lato from, https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css, has the following CSS (formatted, and sorted by font-weight):

Click to reveal

@font-face {
	font-family: Lato;
	font-weight: 100;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-hairline/lato-hairline.woff2) format("woff2"),
		url(../fonts/lato-hairline/lato-hairline.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 100;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-hairline-italic/lato-hairline-italic.woff2) format("woff2"),
		url(../fonts/lato-hairline-italic/lato-hairline-italic.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 200;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-thin/lato-thin.woff2) format("woff2"),
		url(../fonts/lato-thin/lato-thin.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 200;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-thin-italic/lato-thin-italic.woff2) format("woff2"),
		url(../fonts/lato-thin-italic/lato-thin-italic.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 300;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-light/lato-light.woff2) format("woff2"),
		url(../fonts/lato-light/lato-light.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 300;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-light-italic/lato-light-italic.woff2) format("woff2"),
		url(../fonts/lato-light-italic/lato-light-italic.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 400;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-normal/lato-normal.woff2) format("woff2"),
		url(../fonts/lato-normal/lato-normal.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 400;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-normal-italic/lato-normal-italic.woff2) format("woff2"),
		url(../fonts/lato-normal-italic/lato-normal-italic.woff) format("woff");
}
@font-face {
	font-family: "Lato Medium";
	font-weight: 400;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-medium/lato-medium.woff2) format("woff2"),
		url(../fonts/lato-medium/lato-medium.woff) format("woff");
}
@font-face {
	font-family: "Lato Medium";
	font-weight: 400;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-medium-italic/lato-medium-italic.woff2) format("woff2"),
		url(../fonts/lato-medium-italic/lato-medium-italic.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 500;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-semibold/lato-semibold.woff2) format("woff2"),
		url(../fonts/lato-semibold/lato-semibold.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 500;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-semibold-italic/lato-semibold-italic.woff2) format("woff2"),
		url(../fonts/lato-semibold-italic/lato-semibold-italic.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 600;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-bold/lato-bold.woff2) format("woff2"),
		url(../fonts/lato-bold/lato-bold.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 600;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-bold-italic/lato-bold-italic.woff2) format("woff2"),
		url(../fonts/lato-bold-italic/lato-bold-italic.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 800;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-heavy/lato-heavy.woff2) format("woff2"),
		url(../fonts/lato-heavy/lato-heavy.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 800;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-heavy-italic/lato-heavy-italic.woff2) format("woff2"),
		url(../fonts/lato-heavy-italic/lato-heavy-italic.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 900;
	font-style: normal;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-black/lato-black.woff2) format("woff2"),
		url(../fonts/lato-black/lato-black.woff) format("woff");
}
@font-face {
	font-family: Lato;
	font-weight: 900;
	font-style: italic;
	text-rendering: optimizeLegibility;
	src: url(../fonts/lato-black-italic/lato-black-italic.woff2) format("woff2"),
		url(../fonts/lato-black-italic/lato-black-italic.woff) format("woff");
}

If you look closely you'll see that most of the @font-face declarations, from weight 100 to weight 900 (but skipping 700 for some reason) use the font named Lato. However there is one other named @font-face, named Lato Medium, which only has the weight 400.

The result of this is that if Documenter.jl uses font-family: "Lato Medium" instead of font-family: Lato in its CSS — which it does (see below) — browsers will be forced to synthesize the font weights other than 400.

https://github.com/JuliaDocs/Documenter.jl/blob/77f0bdd7c742fc7d7ed91c6b0ab6582f14e33e81/assets/html/scss/documenter-dark.scss#L17

https://github.com/JuliaDocs/Documenter.jl/blob/77f0bdd7c742fc7d7ed91c6b0ab6582f14e33e81/assets/html/scss/documenter/_variables.scss#L50

Documenter.jl should instead use font-face: "Lato". This would allow it to use the “real” fonts of various weights instead of forcing the browser to synthesize them. There is a real difference here. Here is the synthesized font-weight: 600 from https://documenter.juliadocs.org/stable/man/syntax/#@example-block:

And here's what it looks like if we change that <strong> element to have font-family: "Lato":

Much better!

I believe this issue was introduced in #1604, and that the fix is changing $family-sans-serif in the two SCSS files linked above.

Oct 31 '23 20:10 rben01

This needs @mortenpi to decide. It looks like it was intentional: https://github.com/JuliaDocs/Documenter.jl/pull/1604

Nov 01 '23 20:11 odow

I guess it does look intentional — using only the single weight-400 family throughout, and having the browser synthesize the other weights, in order to keep things looking the same as when using the one weight from Google Fonts — but I'm not sure if this is the right choice going forward given that Documenter.jl has access to the full breadth of weights. Synthesized fonts just don't look as nice as the “true” versions. Also I'm not sure weights less than 400 can be synthesized from 400, which would pose a problem if someone wanted to use those weights.

Nov 06 '23 16:11 rben01