Local Fonts Access API Kaleidoscope24.com
2023-08-08. Have you ever wanted to use the fonts installed on your device in your web applications? If so, you might be interested in the new Local Fonts Access API, a proposed web standard that aims to make it easier for developers to access and use local fonts in a secure and privacy-preserving way.
The Local Fonts Access API is an experimental feature that is currently available in Google Chrome 103 (released 2023-06-01) and Microsoft Edge 103 (released 2023-07-01). It allows web pages to query the user's device for a list of available fonts, and then request access to a specific font face. The API does not expose the actual font data, but rather returns a handle that can be used with CSS font-face rules to render text using the local font.
The main benefits of the Local Fonts Access API are:
- - It enables web applications to offer a richer and more personalized user experience, by allowing users to choose from their own font collection.
- - It reduces bandwidth and latency, by avoiding the need to download large font files from the web.
- - It improves performance and battery life, by leveraging the native font rendering capabilities of the device.
The Local Fonts Access API is designed with security and privacy in mind. The API does not reveal any information about the user's device or installed fonts without their explicit permission. The user can grant or deny access to individual fonts or font families, and revoke it at any time. The API also respects the user's system settings, such as font smoothing and anti-aliasing.
The following code queries the available local fonts, and logs the names and metrics of each to the console:
// JavaScript: Local Fonts Access API
// Feature detection
if ('queryLocalFonts' in window) {
// The Local Font Access API is supported
}
async function logFontData() {
try {
const array = await self.queryLocalFonts();
// Query for all available fonts and log metadata
array.forEach(font => {
console.log(font.postscriptName); // ArialMT
console.log(` full name: ${font.fullName}`); // full name: Arial
console.log(` family: ${font.family}`); // family: Arial
console.log(` style: ${font.style}`); // Regular
});
} catch(e) {
// Handle error, e.g. user cancelled the operation.
console.warn(`Local font access not available: ${e.message}`);
}
}
The Local Fonts Access API is still in development and subject to change. It is not yet widely supported by browsers or operating systems. If you want to learn more about the API, you can check out the explainer document, the specification draft, and the Chrome status entry. You can also provide feedback or report issues on the GitHub repository or the WICG discourse forum.
We hope that the Local Fonts Access API will enable new and exciting possibilities for web typography, and we look forward to seeing what you create with it!
Specification: Local Fonts Access APIDemo: Local Fonts Access Demo
