Font loading status

[andreasgangso]

Clear and concise description of the problem

As a developer using VueUse I want to know the current status of all or certain fonts so that i can show a loading spinner or avoid showing text until the font is loaded.

Suggested solution

export const useFontsReady = createSharedComposable(async () => {
    const ready = ref(false);
    const error = ref<unknown>();

    async function waitForFonts() {
        if (('fonts' in document)) {
            try {
                await document.fonts.ready;
            } catch (e) {
                error.value = e;
            }
        }
        ready.value = true;
    }
    waitForFonts();

    return { ready, error };
});

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.