Published
Edited
Jul 25, 2019
1 fork
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
font_loaded
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
ctx.font = "42px ${font}"
let width = ctx.measureText('G').width
return width
}
Insert cell
html`<style type="text/css">.custom-font { font-family: 'IBM Plex Mono'; }</style>`
Insert cell
mutable font_loaded = false
Insert cell
font
Insert cell
{
var font = new FontFaceObserver('IBM Plex Mono', {
weight: 400
});
font.load().then(function () {
mutable font_loaded = true
}, function () {
console.log('Font is not available');
});
return 'font face observer set-up'
}
Insert cell
html`<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap" rel="stylesheet">`
Insert cell
FontFaceObserver = require('https://bundle.run/fontfaceobserver@2.1.0')
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more