How-To Embed Baybayin On Your Website or Blog

These past few months, there was a surge in awareness of the Baybayin (not Alibata) writing script among the Filipinos. As Baybayin enthusiasts learn how to read it, the need to type it directly from our keyboard grew. The Baybayin Keyboard Layout was released as part of the Ubuntu Philippines' Philippines National Keyboard Layout project (which is available in both GNU/Linux and Microsoft Windows).

The PNKL project allowed many Filipinos to type Baybayin without using any "online typepad" like the Snoworld Baybayin Typepad 01. But other than this, there is also a need to embed Baybayin on websites and blogs, and I've been asked about it a lot of times. In response, here is a detailed how-to guide on how you can display Baybayin correctly on your websites.

So go get a cup of coffee, tea, or chocolate. Prepare yourself, your mind. Get ready to learn a lot of new stuff.

Getting your font(s) ready

We want to display Baybayin and so we need the proper font(s) for web display. Go get your favorite Baybayin font and put it somewhere easily accessible for you. After that follow these steps:

  1. Go to FontSquirrel's @font-face generator
  2. Click the "Add Fonts" button and upload your font(s)
  3. Choose the "Expert…" radio button
  4. On the "Font Formats:" row, check all checkboxes
  5. On the "Subsetting:" row, choose "Custom Subsetting…" radio button
  6. New rows will show up, scroll down until you see "Unicode Ranges:"
    FontSquirrel @font-face generator
  7. Choose the correct range below, if your font is Tagbanwa then copy the Baybayin Tagbanwa Unicode range below and paste it in the "Unicode Ranges:" field as shown in the image above.
    • Baybayin Tagalog script: 1700-1714,1735-1736
    • Baybayin Hanunoo script: 1720-1734,1735-1736
    • Baybayin Buhid script: 1740-1754,1735-1736
    • Baybayin Tagbanwa script: 1760-1774,1735-1736
  8. Then on the "Agreement:" row, check the checkbox if your font is legally eligible for web embedding, otherwise acquire a written permission from the original author.
  9. Click the "Download Your Kit" button to get your web embed compatible font
  10. Upload the content of your downloaded font kit to your webserver

Time to embed your font(s)

Next step, embedding your font kit to your website.

  1. Open your stylesheet file (*.css)
  2. Extract your font kit (you created above) and open the "stylesheet.css" file
  3. Copy the @font-face code snippet to your website's stylesheet file
  4. Change the URL/location of the files to point to where you uploaded your font(s), my stylesheet looks like this:
          @font-face {
              font-family: 'BaybayinModernBrush1';
              src: url('../fonts/baybayin_br1-webfont.eot');
              src: local('☺'), url('../fonts/baybayin_br1-webfont.woff') format('woff'),
                  url('../fonts/baybayin_br1-webfont.ttf') format('truetype'),
                  url('../fonts/baybayin_br1-webfont.svgz#webfontJRppkSIE') format('svg'),
                  url('../fonts/baybayin_br1-webfont.svg#webfontJRppkSIE') format('svg');
              unicode-range: U+1700-1714, U+1735-1736;
  5. If your font-family is called "BaybayinModernBrush1" (see example above) then add it as the first font in all instance of "font-family:" in your css file like so:
          font-family: BaybayinModernBrush1 Arial serif;
  6. Similar to the previous step, this time search for "font:" If there are other font declarations, then add your font name as the first. Example:
          font: BaybayinModernBrush1 Arial serif;
  7. Save and upload

Displaying the font on your website

You're done. But how to properly display Baybayin on your website? You have a couple of choices:

  1. Enter the corresponding hex codes like so: &#xNNNN (N = number), you'll have plenty of
  2. Use an online Snoworld Baybayin Typepad 01 and copy-paste to your website
  3. Download the Philippines National Keyboard Layout and type Baybayin directly

Obviously, option #1 is the hardest, longest, and more error prone way. While option #3 is the easiest, fastest, and less error prone way (provided you know the rules of Baybayin, you'll be typing correctly in no time).

That's it!

Post a comment