added new blog post
This commit is contained in:
32
src/routes/blog/2026/0325.md
Normal file
32
src/routes/blog/2026/0325.md
Normal file
@@ -0,0 +1,32 @@
|
||||
<p class="lightyears-text">The world looks so different now. The world looks so different now. The world looks so different now.</p>
|
||||
|
||||
## Background
|
||||
|
||||
One of my favourite music artists, [Jaron](https://youtu.be/GXvqQ5-P82I), released his album LIGHTYEARS a little over a year ago. For his visuals, he uses a variety of symbols in place of Latin letters, and there's a converter on [his website](https://jaronsteele.com/) too. Only problem is that my browser can't seem to display most of the characters because the characters aren't included in most fonts.
|
||||
|
||||
That's why I made a font! It allows you to type Latin characters from `A-Z` as well as numbers `0-9` and `!?` in the LIGHTYEARS style. Like this:
|
||||
|
||||
<p class="lightyears-text">trans rights!</p>
|
||||
|
||||
The font exclusively uses characters from the Noto font family. Many of the Noto varieties have been stitched together to recreate the whole LIGHTYEARS alphabet.
|
||||
|
||||
To create the font, I used [FontForge](https://fontforge.org). Finding this tool was both a blessing and a curse, as it was exactly what I needed, but it kept. crashing. all. the. time. I tried both the AppImage as well as the release on `dnf` and both had the same issues. I managed to make it work, but it took a lot of patience. Eventually I figured out that importing Noto Maths gave me a 3-8 second window before the editor crashed. The project file would forget the imported font, but if I had copied any glyphs it would keep those.
|
||||
|
||||
## Download & use
|
||||
|
||||
[Download the font here](https://files.denizk0461.dev/public/lightyears.woff2). It's in the web-optimised `woff2` format and has most characters stripped to minimise its file size – it's less than 20 kilobytes in size! Uppercase and lowercase letters are the same.
|
||||
|
||||
For use on your website, put the font into your resources/static/similar folder and then add this block of code to your CSS file:
|
||||
|
||||
<pre class="code-block">
|
||||
@font-face {
|
||||
font-family: "LIGHTYEARS";
|
||||
src: url("/fonts/lightyears.woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
</pre>
|
||||
|
||||
Then you can change any element's font by setting `font-family: 'LIGHTYEARS', sans-serif;`. Because it's the Latin characters and Arabic numbers that have been changed, you can type text in regular English and people can 'decrypt' the messages by copy-pasting the text somewhere else!
|
||||
|
||||
You do **not** need Jaron's converter to type stylised text! The converter returns the actual symbols from other scripts, whereas this font only changes how letters look.
|
||||
@@ -23,6 +23,17 @@ export interface BlogPostLink {
|
||||
|
||||
|
||||
export const posts: BlogPostLink[] = [
|
||||
{
|
||||
key: "2026/0325",
|
||||
post: {
|
||||
date: "2026-03-25",
|
||||
time: "22:22",
|
||||
banner: "banner.webp",
|
||||
bannerAlt: "A sunset captured from an Autobahn exit.",
|
||||
title: "I made a LIGHTYEARS font",
|
||||
description: "I feel electric and it's only getting brighter!",
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "2026/0317",
|
||||
post: {
|
||||
|
||||
Reference in New Issue
Block a user