"What font is that?" Reverse-engineering the font a web page uses.

[Dan Q]

From a conversation with @fairyrune in chat.

You're looking at a web page. It's got a really cool font. What is it?

Maybe it's even your own web page, but you used a generic font-family: like "monospace" and you want to know what font your system has chosen to represent it?

Here's what you do:

• Right click and Inspect Element on the text. You already know how to do this, I assume. If not: you're in today's Lucky 10,000.
• Switch to the Fonts panel, down near the bottom (screenshot above is from Firefox; other browsers may differ).
• You'll see the actual name of the font, as reported from within the font file (or on your system font library, if it's a local one). This is a much better search term than the font filename which can be just about anything (people sometimes rename them!).
• Better yet: scroll a bit further down and you'll see the URL the font was downloaded from - probably a .woff2 or .woff file - if it's a remote one/not one from your system!
• Copy that URL to the address bar and you can download a copy of the font! You can even click the "@font-face{" foldie below to see what CSS code you'd need to use to add the font to your own website! You should host the font file yourself and adjust the src: url(...) though - hotlinking without permission isn't cool.
• (Obviously fonts are usually copyrighted and you shouldn't use this to commit piracy, even though you totally could: fortunately many web fonts are permissively licensed and often have a link to the license in the font file, which your browser will show you in the "License Info URL:" field; the one in my screenshot is OFL - Open Font License - for example, so you can take and use it to your heart's content.)

Give it a go! Work out what font you're using (very helpful if you're using a Modern Font Stack and trying to work out which typeface you're actually seeing) or reverse-engineer what fonts are in use on other websites (without having to trawl through the Network tab for font downloads or reading all the CSS... just let your browser do the work for you!).

[Licheus]

Thanks Dan, this is very comprehensive. =)

The last piece I read from you was The Difference Between Downloading and Streaming, which also explained it quickly (with the animation in that case).

Have you grouped together your pedagogical pieces somewhere? Also, do you have writings on the topic of pedagogy (like, the topic itself) you can point me to? You seem to have thought a great deal on it.

[Dan Q]

Have you grouped together your pedagogical pieces somewhere?

Hah! That would require a level of organisation of which I'm possibly incapable.

I've definitely got Opinions, for sure. Twenty-something years ago I wrote an excessively-long justification for my argument, against the status quo at the helpline where I volunteered, that virtually anybody would be capable of learning how to do what we did. A predominant theory there was that there were folks who could and folks who couldn't and the essence of the early stages of training was trying to filter the two: I didn't subscribe to this theory.

Interestingly, I believe the same thing about computer programming. I believe that it's a hard thing to teach but that "thinking like a programmer" isn't necessarily an innate thing that some folks can do and others can't... I think that we're just bad at teaching it. By way of example, I've known folks who've tried to learn, say, C, and found it hard, and given up... only years later to learn, say, Java, and realise that they "get it": maybe it was the change of paradigm (procedural to object-oriented) or a different teaching environment or something else entirely... but whatever the reason: in my mind this shows that the high dropout rate in programming courses is a pedagogical failure - a lack of understanding that there are different ways to teach and learn the subject - and not, as some seem to think, that "thinking like a programmer" is just something you're born with.

Anyway: that philosophical aside done... no, I don't have a "collected writings of Dan" except for my blog, I guess. It's all over the place. Because I'm better at writing than I am at collating.

[Licheus]

I like the philosophical stuff. Thanks for humouring me. ^^

I agree with your takes. It’s seldom the good teachers who says “this is impossible to teach”. Stuff like that always comes from the people who aren’t pedagogical, and thus aren’t patient or relentless enough to craft good explanations. It’s our time’s greatest shame that education seems to be shaped by the latter group.

Generally in teaching, there should be more thought-out examples to clearly demonstrate the concept to be taught, more connecting of the dots with a coherent trail all the way through, more repetition of the central idea with less words on everything else, more one-on-one, and more visualisation which directly shows how the code (for instance) affects the visual (where applicable).

Anyway: that philosophical aside done... no, I don't have a "collected writings of Dan" except for my blog, I guess. It's all over the place. Because I'm better at writing than I am at collating.

Yeah, now that I think about it, it’s rare for anyone to be that organised. If they are, they can often be good at organising but bad at teaching, making the organisation meaningless for a situation like this. ^^

Here’s me faking an attempt to get back to topic somewhat (the thread will probably end here anyway): I haven’t had the need to use the technique for finding fonts since trying it out. However, I have added /#:~:text=sample text to links in order to anchor to any text at any site as you taught in chat (your example link) the other day. Very useful, because it’s often a specific place further down a site I want to reference.