Spectral Web Services
Ghost just released font support!
... and maybe broke your custom theme in the process.
Update #2: Custom fonts are back! They're a toggleable beta setting, hidden under /ghost > settings (gear icon) > labs.
Docs are here: How to use custom settings in Ghost themes - Developer docs
If your theme has been updated (and you’ve got the updated copy activated), you should see the toggle changing your fonts. If it doesn’t, you may need to update your theme. (You can also try the code injection fix offered below.)
For official themes, you can get the latest version by clicking to install it from the theme install section - that’ll overwrite the old copy and install the new one. [Don't do that if the old copy is customized.]
For paid themes and customized themes, contact the theme developer and/or try the code injection fix below.
The Ghost team just released support for fonts. This is a feature a lot of users have wanted for a long time, so I'm super excited to see it.
I'm not super excited to have gotten zero notice. In hindsight, there were some commits around custom fonts a couple weeks ago that I didn't pay attention to. (There's so much cool-looking stuff that's all just for ActivityPub, so mostly I don't pay all that much attention, and I was trying to do work that pays the bills, which Github gazing does not.)
But anyway, it's out, in 5.101.1. Here's what you need to know, since the changelog post that'll tell you about it is not out, and apparently outreach to theme devs hasn't happened yet.
(I think very highly of the Ghost dev team, but I think they kind of screwed up here, by not letting theme devs know it was coming. Maybe this was an accidental release and supposed to be behind a flag. Maybe there was a miscommunication.)
If you're using an uncustomized Ghost official theme and have been updated to 5.101 (that's tomorrow for most folks on Ghost Pro), you can start playing with it by updating your theme, using the nice green update button from the themes menu. (Remember that this overwrites your previous copy of the official theme, so if you customized and uploaded an official theme, make sure it isn't using the 'official' theme's name or else you'll overwrite it.)
What you need to know:
Non-official themes are probably not updated yet
Theme developers don't appear to have gotten any advanced notice, unless they were carefully watching for changes in Github. So please go easy on your theme devs for a week or two. I'm sure they're going to be scrambling to release a new version of each of their themes. Loading a theme that hasn't been updated produces a yellow warning box, but the theme will still work fine, just without that nice typography feature. Unless...
There's a bug.
If you have a theme with a 'Typography' custom variable, it's no longer accessible. This is a problem in Episode and Solo, which already had a typography setting. (I suspect that the value ('narrow' or 'wide') is still available to the theme, but it can't be changed in the dashboard.) To fix: Replace 'typography' with any other name, in the package.json file, and replace custom.typography with custom.yournewname, throughout the theme.
Have a customized theme?
If you're running a customized theme (whether it was originally official or not) and if you want this feature, you're going to need some work to add these new features. Please get in touch, but please be patient, because my inbox might be a messy place for a few days here. These are probably 1-2 hour jobs, depending heavily on the theme.
If you like how your site looks and don't have any urges to play with your fonts, you don't need to do anything. You definitely don't need to do anything urgently. That warning box doesn't mean anything's broken, and you can ignore it.
How to fix a theme:
Slow fix
Here's what changes happened to make Source typography-ready:
TryGhostNow, Source is probably one of the more snarly themes, so maybe some themes will be easier. At least, I sure hope so.
Basically, what you need to do is to define the font as --gh-font-body everywhere except for on the headings, which should be --gh-font-headings. If you edit your theme, don't forget that most themes have a build step that compiles and minifies their css, which you'll need to run.
Quick fix
Some themes may be fixable with code injection. You can try this. It might work. It might not. Put it in the sitewide code injection, between <style> </style> tags.
body * {
font-family: var(--gh-font-body);
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--gh-font-heading);
}
You may need to add a !important right before the semi-colon. What works (if it works) will depend on the theme.
That's a bit of a kludge, and may not perfectly adjust what you might consider a heading. But it'll at least get you started, perhaps!
Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it! It's hard work bringing you the latest Ghost news, and caffeine fuels my mission.
