Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use JuliaMono, drop Google Fonts CDN #1569

Merged
merged 8 commits into from
Jun 16, 2021
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

- highlight.js has been updated to `v10.5.0`, which also brings various updates to the highlighting of Julia code. Due to the changes in highlight.js, code highlighting will not work on IE11. ([#1503][github-1503], [#1551][github-1551])

* ![Enhancement][badge-enhancement] The HTML output now uses [JuliaMono][juliamono] as the default monospace font, retrieved from CDNJS. Relatedly, the Lato font is also now retrieved from CDNJS, and the generated HTML pages no longer depend on Google Fonts. ([#618][github-618], [#1561][github-1561], [#1568][github-1568], [#1569][github-1569], [JuliaLang/www.julialang.org][julialangorg-1272])

* ![Enhancement][badge-enhancement] `deploydocs` now throws an error if something goes wrong with the Git invocations used to deploy to `gh-pages`. ([#1529][github-1529])

* ![Enhancement][badge-enhancement] In the HTML output, the site name at the top of the sidebar now also links back to the main page of the documentation (just like the logo). ([#1553][github-1553])
Expand Down Expand Up @@ -570,6 +572,7 @@
[github-487]: https://github.com/JuliaDocs/Documenter.jl/issues/487
[github-511]: https://github.com/JuliaDocs/Documenter.jl/pull/511
[github-535]: https://github.com/JuliaDocs/Documenter.jl/issues/535
[github-618]: https://github.com/JuliaDocs/Documenter.jl/issues/618
[github-631]: https://github.com/JuliaDocs/Documenter.jl/issues/631
[github-697]: https://github.com/JuliaDocs/Documenter.jl/pull/697
[github-706]: https://github.com/JuliaDocs/Documenter.jl/pull/706
Expand Down Expand Up @@ -784,14 +787,19 @@
[github-1553]: https://github.com/JuliaDocs/Documenter.jl/pull/1553
[github-1556]: https://github.com/JuliaDocs/Documenter.jl/issues/1556
[github-1557]: https://github.com/JuliaDocs/Documenter.jl/pull/1557
[github-1561]: https://github.com/JuliaDocs/Documenter.jl/issues/1561
[github-1567]: https://github.com/JuliaDocs/Documenter.jl/pull/1567
[github-1568]: https://github.com/JuliaDocs/Documenter.jl/issues/1568
[github-1569]: https://github.com/JuliaDocs/Documenter.jl/pull/1569

[julia-38079]: https://github.com/JuliaLang/julia/issues/38079
[julia-39841]: https://github.com/JuliaLang/julia/pull/39841
[julialangorg-1272]: https://github.com/JuliaLang/www.julialang.org/issues/1272

[documenterlatex]: https://github.com/JuliaDocs/DocumenterLaTeX.jl
[documentermarkdown]: https://github.com/JuliaDocs/DocumenterMarkdown.jl
[json-jl]: https://github.com/JuliaIO/JSON.jl
[juliamono]: https://cormullion.github.io/pages/2020-07-26-JuliaMono/


[badge-breaking]: https://img.shields.io/badge/BREAKING-red.svg
Expand Down
6 changes: 5 additions & 1 deletion assets/html/scss/documenter-dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ $bulmaswatch-import-font: false;

$documenter-is-dark-theme: true;

// Darkly sets the font variables, so we need to override them here
$family-sans-serif: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$family-monospace: 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', 'DejaVu Sans Mono', monospace;
$family-monospace: 'JuliaMono', 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', 'DejaVu Sans Mono', monospace;

$info: #024c7d;
$success: #008438;
Expand Down Expand Up @@ -56,6 +57,9 @@ $button-static-color: $grey-lighter;
$button-static-background-color: $background;
$button-static-border-color: $border;

// Import the CSS definition of Julia Mono
@import "juliamono";

// All secondary themes have to be nested in a theme--$(themename) class. When Documenter
// switches themes, it applies this class to <html> and then disables the primary
// stylesheet.
Expand Down
3 changes: 3 additions & 0 deletions assets/html/scss/documenter-light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
@import "documenter/patches";
@import "documenter/layout/all";

// Import the CSS definition of Julia Mono
@import "juliamono";

// Workaround to compile in highlightjs theme, so that we could have different
// themes for both
@import "highlightjs/default"
2 changes: 1 addition & 1 deletion assets/html/scss/documenter/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $lightness-unit: 8% !default;
// -----
// Declares the font family for the main text.
$family-sans-serif: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
$family-monospace: 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', 'DejaVu Sans Mono', monospace !default;
$family-monospace: 'JuliaMono', 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', 'DejaVu Sans Mono', monospace !default;
// Note: declaring a font family here does not necessarily mean that it will be available
// for the user. For uncommon fonts it is up to the user to also provide the necessary font
// assets, e.g. via a CDN, in the makedocs() call.
Expand Down
44 changes: 44 additions & 0 deletions assets/html/scss/juliamono.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
$juliamono-base-url: "https://cdnjs.cloudflare.com/ajax/libs/juliamono/0.037";

@font-face {
font-family: JuliaMono;
font-weight: 300;
font-style: normal;
src: local('JuliaMono'), url("#{$juliamono-base-url}/JuliaMono-Light.woff2") format("woff2");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What exactly do these different versions do? For my own website I used the one called Regular but that one is not even included here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've not yet found out how CSS font weights works. :)

In the font file I have these definitions:

Light 300

Regular 400

Medium 500

Semibold 600

Bold 700

Extrabold 800

Black 900

  • Regular is the one I'd use by default.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. What determines which one is used? Will all those file be loaded by the browser? And for the case of Documenter, are all of them used?

Copy link
Contributor

@cormullion cormullion Apr 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my Documenter docs CSS I use just this one:

@font-face {
	font-family: JuliaMono-Regular;
	font-display: fallback;	/* allow 100 milliseconds then display fallback */
	src: url("https://cdn.jsdelivr.net/gh/cormullion/juliamono/webfonts/JuliaMono-Regular.woff2");
}

Probably not a good idea to ask for them all :) (especially on mobile)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For what it's worth, it looks like Chrome at least is smart enough not to download the .woff2 if you're not actually using it. Currently, with this setup, on the -Medium is actually loaded, because the code blocks have the (default) weight of 400.

That said, I agree that, if we're gonna have the CSS file here, we should only have -Regular there. However, @cormullion, what is the actual difference between the .woff2 files of the different weights? Why are you generating different ones in the first place?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Each woff2 file contains the glyph shapes and data for one specific weight, so you need a separate file for each weight. (I think variable fonts might come in one big file, but this isn’t one of those.)

text-rendering: optimizeLegibility;
}
@font-face {
font-family: JuliaMono;
font-weight: 400;
font-style: normal;
src: local('JuliaMono'), url("#{$juliamono-base-url}/JuliaMono-Medium.woff2") format("woff2");
text-rendering: optimizeLegibility;
}
@font-face {
font-family: JuliaMono;
font-weight: 500;
font-style: normal;
src: local('JuliaMono'), url("#{$juliamono-base-url}/JuliaMono-SemiBold.woff2") format("woff2");
text-rendering: optimizeLegibility;
}
@font-face {
font-family: JuliaMono;
font-weight: 600;
font-style: normal;
src: local('JuliaMono'), url("#{$juliamono-base-url}/JuliaMono-Bold.woff2") format("woff2");
text-rendering: optimizeLegibility;
}
@font-face {
font-family: JuliaMono;
font-weight: 800;
font-style: normal;
src: local('JuliaMono'), url("#{$juliamono-base-url}/JuliaMono-ExtraBold.woff2") format("woff2");
text-rendering: optimizeLegibility;
}
@font-face {
font-family: JuliaMono;
font-weight: 900;
font-style: normal;
src: local('JuliaMono'), url("#{$juliamono-base-url}/JuliaMono-Black.woff2") format("woff2");
text-rendering: optimizeLegibility;
}
48 changes: 45 additions & 3 deletions assets/html/themes/documenter-dark.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 45 additions & 3 deletions assets/html/themes/documenter-light.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions src/Writers/HTMLWriter.jl
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ module RD
using ..HTMLWriter: KaTeX, MathJax, MathJax2, MathJax3

const requirejs_cdn = "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
const google_fonts = "https://fonts.googleapis.com/css?family=Lato|Roboto+Mono"
const lato = "https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css"
const fontawesome_version = "5.15.0"
const fontawesome_css = [
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/$(fontawesome_version)/css/fontawesome.min.css",
Expand Down Expand Up @@ -829,7 +829,7 @@ function render_head(ctx, navnode)

page_title = "$(mdflatten(pagetitle(ctx, navnode))) · $(ctx.doc.user.sitename)"
css_links = [
RD.google_fonts,
RD.lato,
RD.fontawesome_css...,
RD.katex_css,
]
Expand Down
1 change: 1 addition & 0 deletions test/examples/make.jl
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ htmlbuild_pages = Any[
"unicode.md",
"latex.md",
"example-output.md",
"fonts.md",
]

function html_doc(build_directory, mathengine)
Expand Down
Loading