Platform
Resources
Pricing
Sign in
Get started
Grant Custer
Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him.
Workspace
Fork
Published
By
Grant Custer
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.
Try it for free
Learn more
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
font
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
font_size
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
line_height
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
font_loaded
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
FontFaceObserver
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML