Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
a Summer day - @699.91 (what is this?)
Activity rating: Four Stars Posts & Arts: 78/1k.beats Random | Recent Posts | Guild Recents
News: It's only life! :dog: Guild Events: Summerween Watch-a-thon

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  "What font is that?" Reverse-engineering the font a web page uses.


« previous next »
Pages: [1] Print Embed
Author Topic: "What font is that?" Reverse-engineering the font a web page uses.  (Read 102 times)
Dan Q
Hero Member ⚓︎
*****
View Profile WWWArt


I have no idea what I am doing
⛺︎ My Room
RSS: RSS

Guild Memberships:
Artifacts:
Dan Q Cruisin'I DIDN'T meet Dan Q on Melonland!
« on: a Summer day » Embed

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!).

Logged

https://danq.me/_q26t/badges/dan-q-88x31-lighter.gif https://danq.me/_q26t/badges/dan-q-88x31-peekaboo-scroller.gif https://beige-buttons.danq.dev/beige-buttons-88x31.gif https://embed-html.danq.dev/embed-html-88x31.gif

Artifact Swap: PolyamorousI met Dan Q on Melonland!radio polyDoctor RedactedJoined 2025!
Licheus
Casual Poster ⚓︎
*
View Profile WWW


⛺︎ My Room

Artifacts:
Joined 2026!
« Reply #1 on: a Summer night » Embed

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.

Logged
Dan Q
Hero Member ⚓︎
*****
View Profile WWWArt


I have no idea what I am doing
⛺︎ My Room
RSS: RSS

Guild Memberships:
Artifacts:
Dan Q Cruisin'I DIDN'T meet Dan Q on Melonland!
« Reply #2 on: a Summer day » Embed

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.

Logged

https://danq.me/_q26t/badges/dan-q-88x31-lighter.gif https://danq.me/_q26t/badges/dan-q-88x31-peekaboo-scroller.gif https://beige-buttons.danq.dev/beige-buttons-88x31.gif https://embed-html.danq.dev/embed-html-88x31.gif

Artifact Swap: PolyamorousI met Dan Q on Melonland!radio polyDoctor RedactedJoined 2025!
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
MelonLand @000

Minecraft: Online
Join: craft.melonking.net