sitelen pona is a glyph-based writing system for toki pona. Even though it's probably most common to write toki pona in regular latin alphabet, I think it's more fun to use the glyphs! I think it also helped me read and write better, maybe because the pictographs are connected to the meaning. It also just looks cool! I always made up secret languages and codes as a kid, and it feels a bit like that.

There's a few ways to display the glyphs on web pages. To use sitelen pona on this website, I used the following method:

Step 1

Download your favourite sitelen pona font. This is the one I use! This page also includes instructions on how the font works.  This particular font has two versions for writing toki pona in two different ways (and monospaced and regular versions of each).

• asuki version of the font uses ligatures to automatically convert toki pona words into the correct glyph. so typing 'toki' in your html file would turn into 󱥬 on your webpage. This is the easierst way! If you choose to do this, skip ahead to step 2!
• juniko version of the font requires you to use dedicated unicode characters for each glyph from the Under-Con Script Unicode Registry project. I use this version because I like to make my life difficult  easily mix toki pona and English text on the same page when I want to, like this one! If I used asuki, english text ends up l󱥄󱥄󱥹g 󱤧k󱤉 this. As you can see from the large amount of text below, choosing this option is a bit more complicated.

"But jan sunosin," you might say, "if I choose the juniko version, it seems like a huge pain in the butt to write all my content with special unofficially-assigned unicode characters! How do I even type those unicode characters??"

There are a few ways to make this viable. A detailed guide and credits for these tools can be found here.

• One way is to use this converter to write your text, after which you can copy and paste the resulting stelen pona unicode characters into your html file. This is probably the easiest method!
• Another way is to download and run this autohotkey script, which will convert toki pona words into the correct unicode character as you type. I use the version that requires you to type a backtick (`) after each toki pona word to convert it, i.e. I type "toki`" which turns into 󱥬. (Also, Autohotkey is very cool and useful for lots of things.)

There's another complication with this method, which is that if you use the neocities native file editor, it's very difficult to edit your html files since your web browser won't displaying the glyphs! We won't really be able to read our own html files if they look like this...

The solution is this:

1.  Install the font on your own computer.
2. Install the Stylus extension to your web browser.
3. Open the externsion settings, and add the following CSS as a custom style in (either on neocities URLs, or everywhere!)

:root {
    --font-primary: Whitney,"Helvetica Neue",Helvetica,Arial,sans-serif, "sitelen seli kiwen juniko","linja-nanpa","Fairfax HD","insa pi supa lape";
    --font-display: Ginto,"Helvetica Neue",Helvetica,Arial,sans-serif, "sitelen seli kiwen juniko","linja-nanpa","Fairfax HD","insa pi supa lape";
    --font-code: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace,"sitelen seli kiwen juniko","linja-nanpa","Fairfax HD","insa pi supa lape";
    --font-headline: Ginto Nord,Ginto,"Helvetica Neue",Helvetica,Arial,sans-serif,"sitelen seli kiwen juniko","linja-nanpa","Fairfax HD","insa pi supa lape";
}

Now we should be able to read our html pages as we write them, as seen below!

Step 2

Upload the font to your website!
You can stick it in a folder if you like, but I just threw it in the root directory for this site.

Step 3

Add the font definition to your CSS file. I added these lines to my main "style.css" file:

@font-face {
  font-family: 'sitelen seli kiwen juniko';
  src: url('sitelenselikiwenjuniko.ttf') format('truetype');
}

Step 4

Now you can simply assign your sitelen pona font as a style to whatever part of your web page you want to display it! For my website, I use these lines to style all body text:

body {
  font-family: 'sitelen seli kiwen juniko';
}

Or, you could assign it to aspecific class, like this:

.sitelen-pona{
font-family: 'sitelen seli kiwen juniko';

Step 5

Now you can go write some toki pona in your html page! Maybe it looks something like this:

<body>
<p class="sitelen-pona">toki tawa ala!</p>
</body>

Congrats! You now have 󱥠‍󱥔 on your web page!

Let me know if you used this tutorial, I love to read sitelen pona on the web!