How to load custom font in czml.

CesiumJS
1

Hello,

I would like to know,
if there are a way to load a specific font (.ttf in my case),

thanks in advance!

2

Yes, that should be possible, but you’ll have to convert the .ttf to web-font format, .woff. Also from a legal perspective, you need to own rights to the font or have a license to be able to use it on a website.

In the past I’ve used this font converter, that I found just by randomly searching around the web: http://orionevent.comxa.com/otf2woff.html

Once the conversion is done, you need to make sure your web server serves the .woff file with the correct MIME type, and you need to add a special block of CSS to CesiumViewer to make the font available on the page by referencing the woff file.

@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url([http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff](http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff)) format('woff');
}

CZML itself just uses regular CSS font names in the label styles, but if you do the above correctly, you can add your own font to the list of known CSS font names on your page. The above example looks for a local user-installed font of the desired name, and falls back on the network woff file if the user doesn’t have the font.

A great place to look for free fonts is Google’s own “web fonts” effort. Their site provided me the above sample code just now. They serve freely reusable fonts from their CDN, and they should work in Cesium Viewer just by linking the CSS and naming the font correctly in the CZML.

http://www.google.com/fonts/

–Ed.

3

Hi,

This, is a very clear and complete answer!

Thank you :wink: