An extremely overlooked process for displaying fonts, images, documents, spreadsheets, etc. on the web is the use of base64 encoding. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.
It might be common knowledge, but I think breaking down exactly what base64 encoding is could be very helpful to beginner web developers:
Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.- Wikipedia
In simpler terms: it is a encoded format that can change an element like this:
<img src="/path/to/image.webp" alt="Cool image">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=" alt="Cool image">
That completely depends on the situation. For most regular day-to-day web development - probably not. While base64 is useful, it is slightly less per-formant than directly using a source file (though, one could argue that making the extra browser request is less per-formant as well).
But that doesn't mean there aren't a few edge cases.
There are a ton of freely available encoders out in the wild web, but my personal go-to is base64converter.com. Simply upload your file and convert.
Though these limitations can be deal-breakers in certain situations, I find it extremely helpful for developers to keep base64 encoding in their back pockets for a rainy day.