Add Nodesto font files to 5e, v3

[Gazook89]

Simply adds the 'Nodesto Caps Condensed' fonts (regular, italic, bold, & bold italic) to the available fonts for v3. Fonts are from this repo.

I skipped Legacy for now but can add them if needed. I wasn't sure if we wanted to the same files copied twice into this repo (one for each v3 and Legacy folders), or just point Legacy fonts to the v3 folder?

I also did not add any snippet to use this font, or assign it to any existing element in the style sheet. I had thought that something like this (below) in v3 could work but will wait for any feedback on it before going ahead. This can also be done in a different PR, too.

.page .title {
    color: white;
    text-align:center;
    font-family: 'NodestoCapsCondensed';
    font-size:92px;
    -webkit-text-stroke: 6px black;
  paint-order: stroke fill;
}

And the snippet, in the Text Editor snippet menu:

{{title Player Handbook}}

font-size hasn't been measured.

TODO:

• Fix Bold font so outlines work properly (union any characters made of overlapping glyphs)
• Fix Bold-Italic font
• Measure font heights to match PHB cover page by default
• Correct "space" width for each font

[calculuschild]

This is good as-is. I'll merge this so we have the fonts, and we can add CSS styling in a separate PR when we actually have a snippet to apply it to. We can keep it in V3 for now.

Does anyone else want to be a second eye to verify that this works? I don't have my laptop to check this at the moment.

[jeddai]

I'll take a look!

[jeddai]

I'm getting this error when trying to run but it's bound to be unrelated: Error: Cannot find module 'vitreum/steps/jsx.watch.js' -- any known solution for that?

[calculuschild]

vitreum/steps/ is part of an older Vitreum version. You are probably running one of the out-of-date build scripts (dev.js or quick.js) which we probably should delete. Use node scripts/buildHomebrew.js --dev instead for the current build script.

[AlexeySachkov]

It might be helpful for future maintenance to add a README file to fonts directory, which would explain which fonts were pulled from which sources so we (or someone else) know how to update them when that will be needed.

[jeddai]

This is what I'm getting when I use the CSS provided in the PR, I don't think this is right.

[Gazook89]

Dang it, stupid chrome....

this is FF:

hang on...

[jeddai]

Firefox definitely looks better on my end but the font still isn't right.

[calculuschild]

This is what I'm getting when I use the CSS provided in the PR, I don't think this is right.

Check that the fonts are actually being copied into the build folder. You might need to manually stop and restart the server to trigger a rebuild. I don't think the livereload/watchfile is checking for changes to the font files.

[jeddai]

Good call, unfortunately they're in the build folder and in the build folder's 5e/fonts.less file as expected

[calculuschild]

Hard refresh your browser/clear cache so it can pull in the new CSS file?

[Gazook89]

It took my firefox a full night to refresh so that the new font pulled in, whereas my Chrome updated after like 5 minutes. To be fair, i gave up on FF after like 15 minutes and went to bed.

This is why I'm not super excited about creating themes

[Gazook89]

I'm not sure why Chrome isn't working. It seems the paint-order property isn't being applied, though it is a long supported property according to MDN and caniuse.com. Trying to find any bug reports about it. There are other methods of adding stroke, but any stroke larger than 1px starts to not look very good.

Edit:
I will walk that back a little bit, this is fine in both browsers:

.page .title {
    color: white;
    text-align:center;
    font-family: 'Nodesto Caps Condensed';
    font-size:92px;
    -webkit-text-stroke: 2px black;
    letter-spacing: -.03em;
}

[jeddai]

Hard refresh your browser/clear cache so it can pull in the new CSS file?

My dev settings disable the cache by default, also tried the "Empty Cache and Hard Reload" and it didn't help.

It took my firefox a full night to refresh so that the new font pulled in

A solution to this could be to update the url we use for fonts.less to include a query parameter like t or something that has a value based on the current released version.

[Gazook89]

A solution to this could be to update the url we use for fonts.less to include a query parameter like t or something that has a value based on the current released version.

I'm all for anything that speeds up development in the Styles/Themes department, particularly as Swappable Themes come into play. Maybe i finally get off my duff and work on the 'old journal/notebook' theme @calculuschild is asking me about :)

[calculuschild]

@Gazook89 The issue with paint-order is that Chrome only applies it to SVG fonts, but even with just a narrow stroke I'm getting weird artifacts on the Bold font (see the W and M). See https://stackoverflow.com/questions/69253420/text-stroke-webkit-text-stroke-css-problem.

Also note from his screenshot that the font itself is not loading (you can see the shapes of the characters are totally different). The .woff2 files here are not valid font files. When I try to edit them using a font editor it says "the font is not valid, as the head table is missing". I had to re-convert the font to get it to load at all.

(And you need the font-family to be NodestoCapsCondensed not Nodesto Caps Condensed to match the fonts.less file.)

[calculuschild]

I'll upload the valid font files now... We'll have to figure out the stroke as well once this becomes a snippet....

[calculuschild]

Perhaps we can hack it with shadows?

.page .title {
    color: white;
    text-align:center;
    font-family: 'NodestoCapsCondensed';
    font-size:92px;
    text-shadow:
     -1px 0px 2px #000,  
      1px 0px 2px #000,
      0px 1px 2px #000,
      0px -1px 2px #000;
    letter-spacing: -.03em;
}

[calculuschild]

I might actually be able to "union" the characters in these font files so any stray lines and contours are all joined into one contour. Would fix the stroke artifacts.

[calculuschild]

I think I fixed the bold font file to not have such ugly outlines, but it looks like the bold-italic has a similar issue.

[jeddai]

With the latest commit I have confirmed the font is loading correctly for me!

[calculuschild]

Ok, I just need to make the same fixes for the bold-italic and then I can merge this.... Alexa, set a reminder...

For future reference, the process for fixing these using FontCreator 14.0:

1. Open font
2. Double-click to Edit problem glyph
3. Right click -> Split Self Intersecting (any self-intersecting shapes are now separate pieces)
4. Union (joins all adjacent/overlapping pieces into a single contour)
   
5. Optimize (vise button) (recalculates contours and removes redundant path points)
   

[calculuschild]

Ok, I think this is good to go now with the fixed font files. @jeddai @Gazook89 do the font spacings/etc look ok? Do you notice any weird artifacts left over?

[jeddai]

It's looking great for me!

[calculuschild]

Cool. @Gazook89 Thanks! 💯 🎉 👍 🥇