Using Lao fonts on web pages

Introduction

Lao text on web pages will (by default) be displayed using a font selected by the platform (Windows, macOS, iOS, Android, etc.) that includes characters in the Unicode-defined range for Lao characters. For many web pages, this is fine, and results in the fastest loading of the pages being viewed.

However, for various reasons a page designer may prefer to present the text using a specific Lao font, which must then be either linked to or embedded in the page source. This makes initial loading of the page take a little longer, but once loaded, a font will remain cached by the browser and be instantly available for all other pages using the same font. Many Lao Unicode OpenType fonts are now available (non-Unicode Lao fonts should never be used for web pages) but not all render well and some fonts (e.g. the Lao fonts included by Microsoft and Apple with Windows and macOS) have license restrictions that do not allow use as embedded web fonts.

Font format to use for embedded fonts

All current browsers support the use of embedded TrueType (.ttf) and Web Fonts (.woff) fonts. WOFF format fonts are compressed and faster to load than the TrueType fonts from which they are derived and a number of free, online converters are available to convert between formats. Most current browsers also support the WOFF2 format which is similar to WOFF but usually compressed to a smaller file size, so will be slightly faster to load. However, it is simple to configure a web page to refer to more than one font format and the browsers will then load whichever is first recognized and accepted by that browser (see below).

Older versions of Internet Explorer did not support either variable fonts or embedded TrueType fonts. At the time of writing (November 2021), almost no-one still uses IE (c.f. Usage share of web browsers), so it will rarely be considered necessary to try to embed fonts in the .eot format recognized by IE, online converters are available that will convert (non-variable) TrueType fonts to .eot format if viewing with IE is likely.

Fonts to use

The diacritic marks (superscript and subscript vowel and tone marks) that are an essential part of Lao text require OpenType feature support to be correctly displayed for Unicode-coded text. Until relatively recently, such support was lacking (or not fully implemented) on platforms other than Windows and various methods were used to allow Lao text to be rendered more-or-less correctly by non-OpenType fonts.

Now, however, most operating system platforms, browsers and applications support OpenType features although not all correctly support the mark and mkmk features normally used to render Lao text correctly. $lswin currently provides several families of Lao variable TrueType fonts that can be freely used and embedded in Lao web pages, each with a range of stroke weights and character widths. Variable TrueType fonts are particularly well suited to web use since a single font file may be embedded allowing text to be displayed using a wide range of stroke widths, italic (slant) angles and character widths. See the sample pages SengBuhan, SaysetthaMai or Saysettha for details.

How to embed fonts in a web page

The @font-face CSS declaration is used to embed a font that is to be used in the text of the page. Unless using a variable font, a separate @font-face will be required for each stroke-weight and style (normal or italic) that will be required, although in most cases browsers will emulate bold and italic styles if only a single regular (non-italic) font is embedded. If the fonts to be embedded are in a 'fonts' subdirectory of the the server root, then the CSS declaration needed would be something like:

        @font-face { 
            font-family: 'LaoFont'; 
            src:  url('/fonts/sengbuhan.ttf') format('truetype'); 
          font-style: normal; 
          font-weight: normal;
        }
      

and the font will be referenced by the assigned font-family name, e.g.:

        html * {
          font-family: 'LaoFont'; 
        }
      

Using Lao variable fonts

Since variable fonts are still not yet universally supported, it is best to conditionally embed the font and provide an alternative non-variable font for styles in which it is used:

        @font-face { 
            font-family: 'LaoFont'; 
            src:  url('/fonts/sengbuhan.ttf') format('truetype'); 
          font-style: normal; 
          font-weight: normal;
        }
        @supports (font-variation-settings: normal) {  
          @font-face { 
              font-family: 'LaoVFont'; 
              src:  url('/fonts/sengbuhan_v.woff2') format('woff2-variations'), 
                    url('/fonts/sengbuhan_v.ttf') format('truetype-variations'); 
            font-weight: 100 900;
          }
        }
      

then to use the variable font by default, falling back to the regular font, define the style, e.g.:

        html * {
          font-family: 'LaoVFont','LaoFont'; 
        }
      

To assign a particular font variation to a class or style with the above @font-face declarations, use font-variation-settings defining the appropriate style values, for example:

        .oblique {font-family: LaoVFont, LaoFont; font-variation-settings: "ital" 0.9;}
        .tight {font-family: LaoVFont, LaoFont; font-variation-settings: "wdth" 50;}
        .heavy {font-family: LaoVFont, LaoFont; font-variation-settings: "wght" 900;}
        .headline {
            font-size:3em; font-family: LaoVFont, LaoFont; 
            font-variation-settings: "wght" 900, "wdth" 200, "ital" 0.25;
            }
      

a sample of each then appearing as:

More information about using CSS with variable fonts can easily be found on the web, such as Variable Fonts on the Web Using CSS.