Support Custom Font Providers with Fallback URLs in next/font/google for Improved Accessibility and Performance

[kwooshung]

Goals

export default {
  fontProvider: {
    google: [
      'https://fonts.googleapis.com/',   // Default Google Fonts
      'https://fonts.loli.net/',         // Common mirror 1
      'https://gfonts.aby.pub/',         // Common mirror 2
      'https://fonts.font.im/'           // Common mirror 3
    ],
  },
};

1. Next.js Configuration:
   • Developers could specify custom font provider URLs in the next.config.js file, like this:
   • The next/font/google module would then attempt to load fonts from these URLs in the specified order, selecting the fastest or most available option.
2. Automatic Switching and Performance Optimization:
   • If the first URL in the list fails or is slow, the system should automatically fall back to the next URL, ensuring optimal performance and reliability.
   • Developers can prioritize mirrors based on their expected performance in different regions, providing a tailored experience for users around the globe.

Expected Outcomes

• Improved Accessibility: By supporting custom font sources and fallback options, Next.js applications can better adapt to different network conditions, enhancing the user experience.
• Increased Flexibility: Developers can choose and prioritize the most appropriate font service providers for their user base, rather than being limited to the default Google Fonts service.
• Optimized Resource Usage: Smaller websites can benefit from reduced hosting complexity and costs by relying on external mirrored URLs rather than managing font files locally.
• Automatic Failover: The ability to specify multiple providers ensures that font loading is resilient to network issues, improving overall site reliability.

When using next/font/google to load fonts in their application, the system will attempt to load the fonts from the first provider in the list. If that provider is unavailable, it will automatically try the next one, ensuring the best possible user experience.

Conclusion:

By adding support for custom font providers and configurable fallback URLs, Next.js will further enhance its accessibility, flexibility, and appeal for developers and users worldwide. This feature would be particularly valuable for smaller websites that benefit from the simplicity, performance improvements, and reliability offered by using a set of fallback CDN URLs.

Thank you for considering this proposal! I’m happy to provide further clarification or assistance if needed.

This proposal clearly outlines the request for a Next.js configuration option that allows developers to specify multiple font provider URLs, ensuring better performance and reliability, especially in regions where Google Fonts may be less accessible.

Non-Goals

No response

Background

In many regions, accessing Google Fonts (https://fonts.googleapis.com/) can be limited or slow due to network restrictions or latency issues. This can negatively impact the user experience for websites that rely on Google Fonts for typography. Developers often mitigate this by using mirrored Google Fonts services or alternative CDN providers. However, currently, next/font/google only supports loading fonts from Google’s official CDN, with no built-in support for alternative font providers.

Proposal

I propose enhancing the next/font/google module to allow developers to specify custom font provider URLs through a Next.js configuration option. Additionally, the configuration should support multiple fallback URLs, enabling the system to select the best available provider based on network performance or availability.