How-To Embed Baybayin On Your Website or Blog

CSS How-To HTML showcase

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 PhilippinesPhilippines 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:”
    [pe2-image src=”” href=”″ caption=”FontSquirrel @font-face generator” type=”image” alt=”fontfacegenerator.png” ]
  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:

    Prism Shortcode Error: field, url, data_src is missing

  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:

    Prism Shortcode Error: field, url, data_src is missing

  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:

    Prism Shortcode Error: field, url, data_src is missing

  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

    Prism Shortcode Error: field, url, data_src is missing

  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!

Donations for the magus

  • XLM (Stellar Lumens) 🚀🪐17: yukino* XLM (Stellar Lumens) 🚀🪐17: yukino*
    • XLM memo/tag (optional): for
    • Highly preferred
  • ZEC (Zcash) Z0.03: t1W7HusjBAXgquM7YHu6xDUEBejmYPKU2HC ZEC (Zcash) Z0.03: t1W7HusjBAXgquM7YHu6xDUEBejmYPKU2HC
  • XRP (Ripple) X5: rU2mEJSLqBRkYLVTv55rFTgQajkLTnT6mA XRP (Ripple) X5: rU2mEJSLqBRkYLVTv55rFTgQajkLTnT6mA
    • XRP memo/tag (required): 246013
  • STEEM: yahananxie STEEM: yahananxie
  • ETH_smartcontract (Etherium) Ξ0.007: 0x739d2aae2a5b7a4e1d64c58d121c9d908d706c83 ETH_smartcontract (Etherium) Ξ0.007: 0x739d2aae2a5b7a4e1d64c58d121c9d908d706c83
    • Gas: please use at least 35,000
    • Do not send non-smartcontract ΞTH and ERC20 tokens to this address.
  • ETH_ERC20 (Etherium) Ξ0.007: 0xB127362Dc268B63cE22E697344D2c51e673f18B6 ETH_ERC20 (Etherium) Ξ0.007: 0xB127362Dc268B63cE22E697344D2c51e673f18B6
    • Accepts non-smartcontract transactions and ERC20 tokens (in particular: AWC, ENJ, PAX, TUSD, USDC)
  • BCH (Bitcoin cash) ₿CH0.004: pp8fkmchlu6a7c53a2s682jd70mncrzemsthca6ftl BCH (Bitcoin cash) ₿CH0.004: pp8fkmchlu6a7c53a2s682jd70mncrzemsthca6ftl
  • XBT (Bitcoin core) ₿0.0002: 32w1De4wvr5jEzC4g5P4rkjvqg2bvMR8Vk XBT (Bitcoin core) ₿0.0002: 32w1De4wvr5jEzC4g5P4rkjvqg2bvMR8Vk

CC BY-SA 4.0 How-To Embed Baybayin On Your Website or Blog by ᜌᜓᜃᜒ (Yuki|雪亮) is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at Legal Notice.

Leave a Reply