ཨིན་ཡིག་འཕྲོ་བརླག་མ་གཏང་བར་བོད་ཡིག་ཆེན་པོ་བཟོས་ཐབས་ཡོད་དམ། How to add a tibetan font on your website only for tibetan characters

Translation Tech
1

How can I set a tibetan font in a website without making the english text look weird?

2 Likes
2

The trick is to avoid the western alphabet of Tibetan fonts by defining the range of Tibetan characters in the CSS with:

unicode-range: U+0F00-0FFF;

Here’s the code used for Lopenling, I will update with a step by step explanation later.

/* Importing main font */
@import url('https://fonts.googleapis.com/css?family=Overpass&display=swap');

/* Importing font for tibetan characters, url to the webfont files are absolute*/
@font-face {
    font-family: 'Qomolangma-UchenSarchen';
    src: url('/qomolangma.eot');
    src: url('/qomolangma.eot?#iefix') format('embedded-opentype'),
        url('/qomolangma.woff2') format('woff2'),
        url('/qomolangma.woff') format('woff'),
        url('/qomolangma.ttf') format('truetype'),
        url('/qomolangma.svg#Qomolangma-UchenSarchen') format('svg');
    /* apply only to tibetan unicode range*/
    unicode-range: U+0F00-0FFF;
    font-weight: normal;
    font-style: normal;
}

/* Apply to all the content */
body {
    /* First show Qomolangma, then Overpass, then san-serif default system font*/
    font-family: 'Qomolangma-UchenSarchen', 'Overpass', sans-serif;
}