This is very nice! I was fumbling with capturing a clock website and cropping away the ads and everything, but then I needed to crop, and every reboot I needed to reload the clock site, and then I couldn't change the font and the display, and I messed around with a Chromakey filter to make it transparent... It was a whole mess.

Luckily I found this! Simple but very, very effective.

Now, I have little experience with HTML and CSS, but in case it helps anyone else: with the help of ChatGPT, I changed it to point to a local font file (I have a retro C64 style scene going on). Just put the referred font file in the same dir as the html.

@font-face {
font-family: myFont;
src: url('C64_Pro_Mono-STYLE.ttf');

#output {
display: inline-block;
font-family: myFont;
font-size: 50px;
text-align: right;
color: lightgray;
border-radius: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.75);
<body translate="no" >
<div id="output"></div>

You rock, thank you for this. I am a total html noob but was able to re-design the clock with no problem. Good work.
A must tool for every OBS user, I approved.
Very nice!! Thank you for sharing.
Tôi đang tìm kiếm nó với ý tưởng tuyệt vời
Nice, thank you.