CSS

I'm trying to add a font to this website. The normal style is working. The bold and the italic styles are working.

The bold+italic style is not working.

Now. I'm not very experienced with this website stuff. I don't know what an "at-rule" is and I first learned about @font-face the other day when I downloaded a font and wanted to use it.

It doesn't seem to matter whether I use HTML  or style="font-weight=bold;font-style=italic;" so I suppose the problem must be with the CSS. But, I did it just like the example code, so. What. What do.

A mystery, for now.

2024-03-31 update: Well, a few days ago I found a workaround but I didn't write about it here!

I've given each of the font variations I'm using their own @font-family names. "Intel One Mono Italic", "Intel One Mono BoldItalic", etc., and I've told specific tags to use specific fonts. The  tag uses the "Italic" font, the  tag uses the "Bold" font, and an  tag inside a  tag (or vice versa) uses the "BoldItalic" font.

And this works well. :) I don't know if it's a terrible idea or not, but it can't be that bad because it works well. :) And I've also got <code> tags using the "Medium" font rather than "Regular".

Click here for a screenshot of the current state of the website.

2024-04-16 update: I've realised that I need to write some CSS for code blocks (that is, a <pre> tag that contains a <code> tag). There are a couple of issue with how they look right now:

The black background only stretches as far as the text, and there's no padding (margin?) on any side - wouldn't it be nice if code blocks actually looked like blocks?
Whatever mysterious power increases the size of text on my phone, it doesn't increase the size of text inside <pre> and I would like it to
Pre-formatted text is only too happy to continue off the side of the page, making the whole thing wider. I need to be able to scroll a code block horizontally and have it contained to the rest of the page.

A web search gave me this blog post, Styling Code In and Out of Blocks - CSS-Tricks, which isn't worded like a tutorial but does give me something to go on. The settings -webkit-overflow-scrolling: touch; and overflow-x: scroll; and max-width: 100% I'm particularly interested in.

I still need to know about the font size thing, though...

2024-08-15 update: I've done it I've solved the font size issue on mobile. I don't fully understand how but I guess that's fine.

The overflow-x: scroll; and max-width: 100% settings mean that code blocks won't jut out off the right side of the page and make the whole thing look untidy. And the font size itself, well. This one line, added to the HTML of every web page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What does it do? It uh. Something to do with the device width. And scale? I don't. I don't get it. But it works! And that's the important thing, isn't it,

2024-09-24: CSS Grid? What is it? How to do it?

There must be a better way to stack these squares together . . .