Skip to content

Commit a7006da

Browse files
chrisdavidmillsdipikabh
chrisdavidmills
and
dipikabh
authored
Add Local Font Access API demo (#320)
* Add Local Font Access API demo * Fix links * Update local-font-access/index.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update local-font-access/index.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update local-font-access/index.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update local-font-access/index.js Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> --------- Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
1 parent 529c409 commit a7006da

File tree

4 files changed

+102
-0
lines changed

4 files changed

+102
-0
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
4747

4848
- The "launch-handler" directory contains a demo for the [Launch Handler API](https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API). [View the demo live](https://mdn.github.io/dom-examples/launch-handler/). This example was originally published on Glitch by [Thomas Steiner](https://front-end.social/@tomayac@toot.cafe).
4949

50+
- The "local-font-access" directory contains a demo for the [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API). [View the demo live](https://mdn.github.io/dom-examples/local-font-access/).
51+
5052
- The "matchmedia" directory contains a basic demo to test matchMedia functionality. See [Window.matchMedia](https://developer.mozilla.org/docs/Web/API/Window/matchMedia) for more details. [Run the demo live](https://mdn.github.io/dom-examples/matchmedia/).
5153

5254
- The "mediaquerylist" directory contains a basic demo to test more advanced matchMedia/mediaquerylist functionality. See [MediaQueryList](https://developer.mozilla.org/docs/Web/API/MediaQueryList) for more details. [Run the demo live](https://mdn.github.io/dom-examples/mediaquerylist/index.html).

‎local-font-access/index.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
width: 500px;
7+
margin: 2rem auto;
8+
}
9+
10+
button,
11+
select {
12+
padding: 5px;
13+
}
14+
15+
html {
16+
font-family: Arial, Helvetica, sans-serif;
17+
height: 100%;
18+
}
19+
20+
.sample-text {
21+
line-height: 1.5;
22+
font-size: 2rem;
23+
}

‎local-font-access/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Local Font Access API demo</title>
6+
7+
<link href="index.css" rel="stylesheet" />
8+
<script defer src="index.js"></script>
9+
</head>
10+
<body>
11+
<h1>Local Font Access API demo</h1>
12+
<section>
13+
<div class="start-button-container">
14+
<button>Get your local fonts</button>
15+
</div>
16+
<div class="select-container">
17+
<label for="font-select">Choose a local font:</label>
18+
<select id="font-select"></select>
19+
</div>
20+
</section>
21+
22+
<p class="sample-text">
23+
The quick brown fox jumps over the lazy dog. Jackdaws love my big sphinx
24+
of quartz. Pack my box with five dozen liquor jugs.
25+
</p>
26+
27+
<p>
28+
This is a demo of the
29+
<a
30+
href="https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API"
31+
>Local Font Access API</a
32+
>. Check out the
33+
<a
34+
href="https://github.com/mdn/dom-examples/tree/main/local-font-access"
35+
>source code</a
36+
>.
37+
</p>
38+
</body>
39+
</html>

‎local-font-access/index.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const selectElem = document.querySelector("select");
2+
const selectElemContainer = document.querySelector(".select-container");
3+
const startButton = document.querySelector("button");
4+
const startButtonContainer = document.querySelector(".start-button-container");
5+
6+
const sampleText = document.querySelector(".sample-text");
7+
8+
selectElemContainer.style.display = "none";
9+
10+
async function populatefonts() {
11+
startButton.textContent = "Fetching local fonts...";
12+
startButton.disabled = true;
13+
14+
try {
15+
const availableFonts = await window.queryLocalFonts();
16+
console.log(availableFonts);
17+
for (const fontData of availableFonts) {
18+
selectElem.innerHTML += `<option value="${fontData.family}">${fontData.fullName}</option>`;
19+
}
20+
21+
selectElemContainer.style.display = "block";
22+
startButtonContainer.style.display = "none";
23+
selectElem.selectedIndex = 0;
24+
25+
selectElem.addEventListener("change", applyFont);
26+
applyFont();
27+
} catch (err) {
28+
console.error(err.name, err.message);
29+
startButton.textContent = "Get your local fonts";
30+
startButton.disabled = false;
31+
}
32+
}
33+
34+
function applyFont() {
35+
sampleText.style.fontFamily = selectElem.value;
36+
}
37+
38+
startButton.addEventListener("click", populatefonts);

0 commit comments

Comments
 (0)