Skip to content
Cantonese Fonts

Browsing with Chrome

Accurate Jyutping annotations used to be hard to come by, and Cantonese Font gives you exactly that. What if your browser can use it to display web pages? That would open up infinite possibilities.

Let’s show you how to make that happen.

Prerequisites

Chromium-based browsers on Mac displays Cantonese Fonts correctly. Any Chrome versions from 2019 onwards should work.

Chrome on Windows 11 renders Cantonese Fonts but only in monochrome.

1. Installing Chrome StyleBot

While you could do a global override in Preference, that is a crude measure which affects many auxiliary content (such as headers, footers, or sidebars) that you do not want changed. What you probably want is to surgically use Canto Font to show particular content for specific sites. To do this, you will need to install a Chrome extension called StyleBot.

  1. Go to StyleBot project page
  2. Click on Stylebot for Chrome to go to Chrome app store
  3. Click Add to Chrome
  4. Pin the extension to the toolbar, by clicking on the puzzle-piece, then push-pin besides Stylebot.

2. Importing styles

StyleBot let you change how different parts of any website look, by writing custom CSS rules. Don’t fret if you don’t know how to write CSS! To help you get started, I have prepared styles for several popular sites:

  1. Cantonese (Yue) Wikipedia 粵語維基
  2. Chinese Wikipedia 中文維基
  3. Chinese WikiSource 維基文庫, a compendium of original text (most classical prose can be found here)
  4. Hong Kong Internet Wiki 香港網絡大典, popular culture
  5. Ming Pao 明報, newspaper in Hong Kong
  6. The Collective 集誌社, news and investigations in Hong Kong
  7. Independent Media 獨立媒體, independent news in Hong Kong
  8. And Then, a cultural magazine/blog in Hong Kong
  9. Vimeo (captions only)
  10. YouTube (captions only)
  11. Spotify Webapp (lyrics only)
  12. KKBox cantopop lyrics (lyrics only)

This is found in your download package as VF-Canto 2.7 chrome mac_win.json (or similarly named .json file):

  • Directoryfonts/
    • …
  • Directorystarters/
    • …
  • Directorystylebot
    • VF-canto-2.7.json

To import the styles,

  1. click on the StyleBot button in the toolbar to open up Stylebot menu
  2. select Options. This will open a new window.
  3. click on Sync
  4. click Import, and select the VF-canto-2.7.json file from your download

We’ll look at simple customizations, and how to turn off a style for a page, in the next section.

3. Simple customizations

Note that you have a tremendous amount of control: all these customizations can be applied to each site separately. You can choose, for example, to use Large Jyutping for WikiSource but Regular for Wikipedia.

Advanced behaviour can be programmed using custom CSS rules, for example, to show Jyutping for a paragraph on mouse-hover. See the article Advanced Stylebot Usage under the How-to Guides.

3.1 Changing font sizes

To change the font size for a site,

  1. click on the StyleBot button in the toolbar to open up Stylebot menu
  2. select Open Stylebot. This will open a new sidebar with the current rules.
  3. adjust the number following font-size. You should see the changes reflected immediately in the browser window.

3.2 De-activating style for a site

To deactivate style for a site, click on the StyleBot button in the toolbar, then toggle off the blue button. You should see the changes reflected immediately.

3.3 Changing to a different font variant 🧪

If you have installed font variants from the Lab 🧪 programme, you can use the following names to replace VF-Canto to access the variants:

  • VF-Canto-Large: Jyutping are twice as large
  • VF-Canto-Bold: Chinese characters are bolded
  • VF-Canto-OnlyJyutping: Only Jyutping shown but no Chinese. The Jyutping here occupy the full height, and you would likely want to half the font-size. For example, if the font-size was originally 4 em, you would want to decrease this to 2 em.

Further reading