Could not fetch from api.fontshare.com in development. Behind corporate proxy server.
In my development environment, I get the following error message when running npm run dev, which results in not being able to view many icons and fonts.:
npm run dev
Nuxt 3.16.2 with Nitro 2.11.9
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ DevTools: press Shift + Option + D in the browser (v2.4.0)
WARN Could not fetch from https://api.fontshare.com/v2/fonts?offset=0&limit=100. Will retry in 1000ms. 3 retries left.
WARN Could not fetch from https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true. Will retry in 1000ms. 3 retries left.
WARN Could not fetch from https://api.fontshare.com/v2/fonts?offset=0&limit=100. Will retry in 1000ms. 2 retries left. 8 Replies
Hi @Pablo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error you're seeing—Nuxt being unable to fetch from https://api.fontshare.com and similar URLs during development—is likely due to your corporate proxy blocking direct access to these external APIs. This results in missing fonts and icons in your development environment.
While the knowledge sources do not provide a direct solution for configuring Nuxt or its modules to work behind a corporate proxy for external font APIs, they do highlight similar proxying and network issues in development environments. For example, proxying API requests through your backend or using server middleware is a common workaround for CORS and network restrictions in Nuxt projects, especially when direct browser access is blocked or limited by network policies Nuxt 3 + SASS: Can't use include paths with @import and @use, How to fix CORS error on 3rd party API call in Nuxt 3?.
What you can try:
- Configure your development environment (Node.js, npm, and your OS) to use your corporate proxy, so that all outgoing requests—including those made by Nuxt and its modules—are routed through the proxy.
- If the font module or your Nuxt config allows, you could try downloading the required fonts and serving them locally, avoiding the need to fetch them at runtime.
- Alternatively, you could set up a proxy endpoint in your Nuxt app to forward requests to the font APIs, so the requests go through your backend (which may have proxy access), rather than directly from the client or build process.
However, the knowledge sources do not provide explicit step-by-step instructions for handling font API requests behind a corporate proxy in Nuxt. If you need more detailed guidance, you may need to consult your corporate IT for proxy configuration or refer to the documentation for the specific Nuxt font module you are using.
I'm sorry, but there's no information in the provided knowledge sources that directly addresses configuring Nuxt to fetch fonts from external APIs behind a corporate proxy.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@264260915296337931> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai which modules use Google icons?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the provided knowledge sources, the Nuxt UI library integrates with Iconify to provide access to over 200,000 icons, including Google Material Icons, via the
@nuxt/icon module. Nuxt UI automatically registers this module for you, so you can use icons from collections such as Material Icons by referencing their names (e.g., i-material-symbols-home) in the <UIcon /> component or as the icon prop in other components like <UButton /> Getting-started > Icons.
There is no mention in the knowledge sources of any other Nuxt module specifically dedicated to Google icons besides the integration through Iconify and the @nuxt/icon module. If you are using Nuxt UI, you are already set up to use Google Material Icons through this mechanism.
If you need to use Google icons outside of Nuxt UI or Iconify, the knowledge sources do not provide information about other modules for this purpose.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@264260915296337931> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai can i use the Google Icons locally?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, you can use Google Icons (such as Material Icons) locally in your Nuxt project. According to the knowledge sources, you can install the relevant icon collection locally using Iconify. For example, to use a specific icon set like Material Icons, you would install its collection (e.g.,
@iconify-json/mdi for Material Design Icons) with:
After installing, the icons can be served locally, which is faster and more reliable for both SSR and client-side rendering. This approach avoids the need to fetch icons from external sources at runtime. You can then use these icons in your components via the <UIcon /> component by referencing their names, such as i-material-symbols-home or similar, depending on the collection you installed.
For more details and examples, see the section on using local icon collections in the Nuxt UI documentation Getting-started > Icons > Collections.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@264260915296337931> Kapa.ai is still learning and improving, please let me know how I did by reacting below.