Serve roboto and roboto-mono locally

[noxpardalis]

First time contributing to piccolo so I hope a fly-by pull request is okay 😃

This addresses #56 by bundling the Roboto fonts with the static resources of the theme. I used Webfont Kit Generator to convert from the ttf fonts to woff2 and then just point to them via @font-face.

The results look okay to me (and crucially only load resources from localhost) and the test passes when I run ./scripts/run-testing.sh.

[dantownsend]

@noxpardalis Thanks a lot for this!

It seems to work well. The only problem I see is we also need the bold font for Roboto. Do we need something like:

@font-face {
    font-family: Roboto;
    font-weight: 700;
    src: local("Roboto"), local("Roboto-Regular"), url(fonts/roboto/roboto-bold.woff2) format("woff2");
}

[noxpardalis]

@dantownsend you're very welcome!

Good catch, indeed you would need something like that. I added both the bold and italic variants in 22a7dc3 (I can drop the italics if it's not needed).

Originally 46f5609 but I had accidentally nested the fonts in the wrong dir.

[dantownsend]

Sorry to be super annoying, but I think we also use Roboto-Mono bold in some of the code blocks. Here's an example in the Python imports:

https://piccolo-orm.readthedocs.io/en/latest/piccolo/projects_and_apps/piccolo_projects.html#example

[noxpardalis]

No problems at all! I just included the bold variant for roboto-mono in f33f9f9.

[dantownsend]

I've been looking at this some more, and this is the URL we used in the past:

https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap?family=Roboto+Mono&display=swap

The response we get back from Google is this:

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
... // And loads more

I realised it wasn't returning Roboto Mono.... I didn't realise because I have Roboto Mono installed on my laptop, and the mono font on iOS looks pretty similar.

The URL that works is: https://fonts.googleapis.com/css?family=Roboto:italic,bold|Roboto+Mono&display=swap

Anyway ...

I realised we also need italic Roboto Mono, as that's what Pygments uses for Python comments.

That just leaves bold-italic, which I don't think we need 🤔

Another Interesting thing is unicode-range. I'm not sure if it's worth including extended unicode support too? What do you think?

Sorry for the long comment - I hope it makes sense.

[noxpardalis]

Sounds, sound. Firstly, I'll include the italic variant for roboto-mono (I should have probably hedged my bets and included it alongside the bold variant in the first place 😆).

The unicode-range would extend the range of characters that the font applies to and from the URL you sent me it seems to cover:

• Cyrillic
• Greek
• Latin
• Vietnamese

I guess they relegate CJK to the fonts made for it. It wouldn't be very difficult to also include coverage for the additional languages (just download the fonts, position them, and then copy the @font-faces), but by my count it would entail adding around 18 more .woff2 fonts.

I wonder if there are any examples of people using the piccolo_theme and heavily using at least one of those four character sets. Do you know if there's any community projects that fit that bill? Personally, I would begin with just the regular font set instead and then wait for specific feedback that necessitated including those specific ranges. What do think?

[noxpardalis]

@dantownsend I added the italic variant for roboto-mono in 9df1b6a 👍

[dantownsend]

@noxpardalis Thanks for this - sorry for the slow reply. All looks good to me 👍

[dantownsend]

@noxpardalis Just released it, and was doing some testing on different devices. It's looking good, but found one edge case - in this code block it uses bold-italic:

https://piccolo-theme.readthedocs.io/en/latest/demo.html#autodoc

Not a rush, but if at some point you wouldn't mind creating a PR adding bold-italic too that would be great!

[noxpardalis]

@noxpardalis Just released it, and was doing some testing on different devices. It's looking good, but found one edge case - in this code block it uses bold-italic:

https://piccolo-theme.readthedocs.io/en/latest/demo.html#autodoc

Not a rush, but if at some point you wouldn't mind creating a PR adding bold-italic too that would be great!

Just opened a PR for adding the bold-italic variant for roboto-mono. I was out of the country for a while, but sorry for not seeing your message earlier 😓.

[dantownsend]

@noxpardalis No worries - thanks for the PR!