Status: Experimental

google-webfonts-client is a typesafe and straightforward fetch client for interacting with the Google Web Fonts API using feature-fetch. This client provides typesafe methods for fetching and downloading Google Fonts.

• Google Fonts Developer API Docs

📖 Usage

Create a Google Web Fonts Client

Use createGoogleWebfontsClient() to create a client with your API key.

import { createGoogleWebfontsClient } from 'google-webfonts-client';

const client = createGoogleWebfontsClient({
	apiKey: 'YOUR_API_KEY'
});

Fetch Available Web Fonts

Fetches the available web fonts from the Google Fonts API.

const webFontsResult = await client.getWebFonts();
const webFonts = webFontsResult.unwrap();

Fetch Font File URL

Fetches the URL of a specific font file based on the provided family, weight, and style.

const fontUrlResult = await client.getFontFileUrl('Roboto Serif', {
	fontWeight: 400,
	fontStyle: 'regular'
});
const fontUrl = fontUrlResult.unwrap();

Download a Font File

Use the client to download a font file, specifying the font family, weight, and style.

const fontFileResult = await client.downloadFontFile('Roboto Serif', {
	fontWeight: 100,
	fontStyle: 'italic'
});
const fontFile = fontFileResult.unwrap();

Error Handling

Errors can occur during API requests, and the client will return detailed error information. Possible error types include:

• NetworkError: Indicates a failure in network communication, such as loss of connectivity
• RequestError: Occurs when the server returns a response with a status code indicating an error (e.g., 4xx or 5xx)
• FetchError: A general exception type that can encompass other error scenarios not covered by NetworkError or RequestError, for example when the response couldn't be parsed, ..

const fontUrlResult = await client.getFontFileUrl('Roboto Serif', {
	fontWeight: 400,
	fontStyle: 'regular'
});

// First Approach: Handle error using `isErr()`
if (fontUrlResult.isErr()) {
	const { error } = fontUrlResult;
	if (error instanceof NetworkError) {
		console.error('Network error:', error.message);
	} else if (error instanceof RequestError) {
		console.error('Request error:', error.message, 'Status:', error.status);
	} else if (error instanceof FetchError) {
		console.error('Service error:', error.message, 'Code:', error.code);
	} else {
		console.error('Unexpected error:', error);
	}
}

// Second Approach: Unwrap response with `try-catch`
try {
	const fontUrl = fontUrlResult.unwrap();
} catch (error) {
	if (error instanceof NetworkError) {
		console.error('Network error:', error.message);
	} else if (error instanceof RequestError) {
		console.error('Request error:', error.message, 'Status:', error.status);
	} else if (error instanceof FetchError) {
		console.error('Service error:', error.message, 'Code:', error.code);
	} else {
		console.error('Unexpected error:', error);
	}
}