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 17, 2019
Fork of
Minimal font loading test
•
1 fork
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
me
=
await
new
Promise
(
(
resolve
,
reject
)
=>
{
const
img
=
new
Image
(
)
;
img
.
onload
=
(
)
=>
{
mutable
aspect
=
img
.
width
/
img
.
height
resolve
(
img
)
;
}
img
.
onerror
=
reject
;
img
.
crossOrigin
=
""
;
img
.
src
=
"https://avatars0.githubusercontent.com/u/679386"
;
}
)
Insert cell
mutable
aspect
=
null
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html
`<style>.custom-font { font-family: '${
font
}' }</style>`
Insert cell
mutable
font_loaded
=
false
Insert cell
{
var
font
=
new
FontFaceObserver
(
`${
font
}`
,
{
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=${
font
.
replace
(
' '
,
'+'
)
}" 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
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
gray_thresh
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
target_pixel_width
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
canvas_me
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
target_width
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
target_height
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
image_data
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
me
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
aspect
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ratio
Edit
Add comment
Copy import
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
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
FontFaceObserver
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML