How might I change my internal CSS to add stylesheets and font families to my block editor?

[ad_1]

Hey all; I checked out the sidebar for the “please don’t post” topics, and I think this is alright.

I use twentytwentytwo and a child theme, and I’m pretty comfortable with adding new external fonts and tweaking CSS.

However, where I’m struggling a little bit is defining *internal* fonts, so they can be used on the Dashboard. Examples of what I mean:

* In my Gutenberg editor, the font doesn’t match what’s used for the post when published. This makes it difficult to have consistency, and if it was someone else besides me using the interface, they’d go “Why does it look different?”
* In my Site Editor (again, this is the “new” Block-based site editor), I can’t add new fonts to the Styles > Typography menu; I’m stuck with either “Default”, “Source Serif Pro” or “System Font”. I’d like to add more.
* I have buttons that call FontAwesome’s library for icons using HTML, but the Gutenberg editor doesn’t render them (presumably because the font isn’t usable on the back end).

I’d like to fix this, preferably without plugins. I’d like to avoid plugins because I rarely find ones that don’t want a greater subscription from me, or gate basic features behind a Pro Subscription (like `Fonts Plugin | Google Fonts Typography`).

I mostly don’t know where I should be looking, or what file I need to add/enqueue/etc. I am comfortable using FTP and doing my own research, but I’ve had problems figuring out where to start.

**Also, if I can sneak one unrelated problem in here**: how would I add text to a default block? Specifically, I want the “Tags” block to have a “Tags:” text before the block adds the tags for the post. Currently, it just lists them plainly (with a separator, like a comma), but I’d like to be able to tweak default blocks. I’m unsure which directory houses those default blocks.

My current way of fixing this is to have a “row within a row” with a Paragraph block that’s right-aligned, so it’s close to the Tag block. It looks like this: “[]” is my row, “{}” is my row-within-a-row.

`[Date Published Block • Post Author Block • {Right-Aligned Paragraph Block: Tag Block}]`

[ad_2]