A Font of Style

So, if you go back to look at this post you might (you definitely should, it's super obvious) notice that it looks a little different.

This looks like a relatively simple change, it'd take you maybe three clicks in a word processor to change the font of your text.

But this website isn't made in a word processor! Publii, the static site generator I use to actually build the pages after I've put together the content, by default uses two fonts: one for body text (this bit) and another for headings (post title and the titles of the next/previous posts linked below). You can, with a little configuration, add more fonts to the list of what can be used for the body of heading font but these are applied to the whole site.

So, the journey to adding a new font or two just to use on specific pages or even for particular paragraphs was much longer than I expected. Publii's documentation was useful, as were a number of GitHub discussions but for someone new to web/coding based work, this was a real learning experience for me and I barely managed to find a solution.

I started by picking out two fonts that were a little fancy, one that I'd use for the VIP post and another just for a fancy equivalent to italic, really. I have a bunch accumulated from various design software installs and hunts for specific fonts for previous projects so I could simply grab two good candidates from my installed fonts folder. I settled on Monotype Corsiva and Pristina as my chosen fonts.

Then, to get them working in the post editor of Publii, I had to convert these into .woff2 format, add them into the fonts lists in the theme-variables.js and the config.json code files in my site's site/input/themes/mytheme folder. The font files went in site/input/themes/mytheme/assets/dynamic/fonts - each with their own sub-folder.

/*Adding fonts into theme-variables */

    'pristina': {
      name: 'Pristina',
      family: '\'Pristina\', serif',
      weight: '100 900',
      hasItalic: false
    },

/* adding fonts into config.json in the options for name": 
/ "fontBody and name": "fontHeading */

                    "label": "Pristina",
                    "value": "pristina",
                    "group": "Serif"
                },

This meant the fonts were 'visible' to Publii and at this point I could have switched body or heading font for the whole site over to these two. But to use them in the editor specifically I had to add two CustomElements (see snippet below) to the config.json and also add the styling of these elements as new css classes to assets/css > editor.css.

/* The CustomElements I added into config.json */       
 {
            "label": "Indented Paragraph",
            "cssClasses": "Indented",
            "selector": "p",
            "postEditor": true,
            "themeSettings": false
        },
        {
            "label": "Elegant",
            "cssClasses": "Cursive",
            "selector": "p",
            "postEditor": true,
            "themeSettings": true
        },
        {
            "label": "Italicised",
            "cssClasses": "Fancy",
            "selector": "p",
            "postEditor": true,
            "themeSettings": true
        }

These are like the paragraph, highlight and drop cap options already in the editor, a way of specifying overriding formatting to a particular section or item in the body of a page or post.

I added three in the end, one for cursive using Monotype, but with indented paragraphs too, a second for just using the normal paragraph formatting but using a fancier italic font via Pristina, then a third that I'm using for Peak Fiction, which is the normal site font but with indented paragraphs, smaller paragraph breaks so it reads more like traditional formatted fiction rather than ultra-modern blog formatted text.

/* the editor.css additions: */

.Indented {
    text-indent: 2em;
    margin-top: 0.1rem;
    }

.Cursive {
    font-family: "Pristina";
    !important
    }

.Fancy {
    font-family: "Monotype Corsiva";
    text-indent: 2em;
    margin-top: 0.5rem;
    !important
    }

This got my new fonts working alright in the editor, and the formatting changes too, but although I could get the formatting to show up kind of on the live site, the fonts would not load. They wouldn't even copy over to the server!

So, I manually uploaded the fonts and their folders into my server's file structure, then went back to the drawing board, looking into the various css files, and even the html and .hs files.

in the end, I managed to edit the style.css file enough to actually call up those manually uploaded fonts and use them. It's not a perfect solution I don't think, but it works! And that's good enough for me!

/* Adding font sources to style css */

        @font-face {
          font-family: 'Monotype Corsiva';
          src: url('../dynamic/fonts/monotype corsiva/monotypecorsiva.woff2') format('woff2');
          font-weight: 100 900; 
          font-display: swap;
          font-style: normal;
        }

        @font-face {
          font-family: 'Pristina';
          src: url('../dynamic/fonts/pristina/pristina.woff2') format('woff2');
          font-weight: 100 900; 
          font-display: swap;
          font-style: normal;
        }

  
/* Then adding the fonts in as variables in the root 
section just below so it looked like this: */

            --body-font:          'Monserrat', sans-serif;
            --fancy-font:         'Monotype Corsiva', serif;
            --curs-font:          'Pristina', serif;

/* then making sure the classes for the css were calling these variables */

Indented,
.Indented {
    text-indent: 2em;
    margin-top: 0.1rem;
    }

Cursive,
.Cursive {
    font-family: var(--curs-font) !important;
    }

Fancy,
.Fancy {
    font-family: var(--fancy-font) !important;
    text-indent: 2em;
    margin-top: 0.5rem;
    }

And this seems to have worked. I could force the matter by editing individual page's HTML in the index.html of course but this generally replaces the font for allllll the text of the body or headings sections which is less than desirable so I stuck with trying to find a .css based solution which I think I have!

I mean, certainly VIP looks sufficiently fancy enough for the eloquent message it conveys!

I shan't lie, this took me maybe a day and a half, two days? I'm not sure it's an entirely stable solution and I have a strong feeling that a theme update would mean I'd have to re-edit all the css files until I figure out theme overrides properly, but I am honestly just happy to have got it all working correctly enough to show up!

I call this...

A result!