Adobe doesn't load

[MarcoTroost]

Hi guys,

This package seems just what my project needs!

Unfortunately, adobe fonts do no load. N.B> Adobe doesn't load in the playground either...

Hope it will be sorted,

kind regards,

Marco

[dosubot[bot]]

Hello @MarcoTroost,

I'm here to help you with any issues you encounter. I'm a bot that can assist you with bug fixes, answer questions, and guide you on becoming a contributor. Let's work together to resolve the problem you're facing with Adobe fonts.

Adobe fonts may not load because the metadata for the fonts could not be downloaded. This issue is handled in the initialiseFontMeta function, which logs an error if the metadata download fails. Without the metadata, the fonts cannot be injected, leading to them not loading ^[1].

To continue talking to Dosu, mention @dosu.

[danielroe]

Would you provide a reproduction? Unfortunately Stackblitz does not always work due to CORS.

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a template for starting with a minimal reproduction: 👉 https://stackblitz.com/github/nuxt/fonts/tree/main/example A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

[MarcoTroost]

Hi Daniel, thank you for the swift reply & you great work on Nuxt!

A reproduction (on stackblitz) would probably also cause CORS issues. I have used the fonts module on my testdomain though. You can find it @ www.trauminfo.de

This is my nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: {
        lang: 'nl'
      }
    }
  },
  site: {
    url: 'https://www.trauminfo.de',
    name: 'Droominfo.nl',
    defaultLocale: 'nl'
  },
  nitro: {
    moduleSideEffects: [
      '@material/web/tabs/tabs.js',
      '@material/web/tabs/primary-tab.js',
      '@material/web/textfield/filled-text-field.js',
      '@material/web/textfield/outlined-text-field.js',
      '@material/web/button/filled-button.js',
      '@material/web/button/outlined-button.js',
      '@material/web/ripple/ripple.js',
      '@material/web/icon/icon.js',
    ],
  },
  modules: [
    ["nuxt-ssr-lit", { litElementPrefix: ["md-"] }],
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    'nuxt-lodash',
    "@nuxtjs/sitemap",
    "@nuxtjs/google-adsense",
    "@nuxt/fonts"
  ],
  fonts: {
    adobe: {
      id: ['ddx0usu'],
    },
    experimental: {
      processCSSVariables: true
    }
  },
  googleAdsense: {
    id: 'ca-pub-7034225815334900',
    test: true
  },
  tailwindcss: {
    cssPath: '~/assets/css/droominfo.css',
    exposeConfig: false,
  },
  routeRules: {
    '/': { prerender: true },
  }
});

Snippet from my tailwind.config:

  theme: {
    extend: {
      fontFamily: {
        sans: ['ff-tisa-sans-web-pro', 'sans-serif'],
        serif: ['ff-tisa-web-pro', 'serif'],
      },

Example implementation:

<p class="font-sans mb-4 text-blue-600 ...">

N.B. This is the correct project id (ddx0usu), since this works on my main domain @ www.droominfo.nl

kind regards,

Marco Troost

[qwerzl]

Snippet from my tailwind.config:

  theme: {
    extend: {
      fontFamily: {
        sans: ['ff-tisa-sans-web-pro', 'sans-serif'],
        serif: ['ff-tisa-web-pro', 'serif'],
      },

We only match the names of fonts. ff-tisa-sans-web-pro is a slug, so it won't be matched. You could try using FF Tisa Sans Pro and see how it goes.

[MarcoTroost]

Hi Qwerzl,

I've tried FF Tisa Sans Pro, but this doesn't work either. N.B. The slug is the documented implementation as given by Adobe:

When i look in the .nuxt folder, nuxt-fonts-global.cssis empty:

Hope these screenshots are of help.

kind regards, Marco

[qwerzl]

Ah, I understand where the problem is. Currently we match fonts with its name from the Typekit API to check if it exists, then we fetch the CSS and get the @font-face definitions whose family-name is the font's slug. But for this font, its slug (ff-tisa-web-pro) and its font-family name defined in the CSS (ff-tisa-web-pro) are not the same.