N
Nuxt•5mo ago
AngeloK

@nuxt/fonts adobe

Anyone here using nuxt/fonts to load adobe fonts? I'm setting my id of my adobe project in the nuxt config like described docs. https://use.typekit.net/gqr4tpc.css This is my typekit link. I'm getting an error: Could not produce font face declaration from adobe for font family ador-hairline. Anyone got a clue? 
  fonts: {
    families: [
      {
        name: "Gotham",
        provider: "local",
        weights: [400, 500],
        styles: ["normal"],
        subsets: ["latin"],
      },
      {
        name: "ador-hairline",
        provider: "adobe",
        weights: [500],
        styles: ["normal"],
      },
    ],
    adobe: {
      id: "gqr4tpc",
    },
  },
  fonts: {
    families: [
      {
        name: "Gotham",
        provider: "local",
        weights: [400, 500],
        styles: ["normal"],
        subsets: ["latin"],
      },
      {
        name: "ador-hairline",
        provider: "adobe",
        weights: [500],
        styles: ["normal"],
      },
    ],
    adobe: {
      id: "gqr4tpc",
    },
  },
4 Replies
Jacek
Jacek•5mo ago
I don't think nuxt/fonts give you much when using Adobe fonts. I would just include following in app » head » link and don't bother with forcing the module to work 
{ rel: 'preconnect', href: '//p.typekit.net', crossorigin: '' },
{ rel: 'stylesheet', media: 'print', onload: 'this.onload=null;this.removeAttribute("media");', href: 'https://use.typekit.net/YOUR_ID.css' }
{ rel: 'preconnect', href: '//p.typekit.net', crossorigin: '' },
{ rel: 'stylesheet', media: 'print', onload: 'this.onload=null;this.removeAttribute("media");', href: 'https://use.typekit.net/YOUR_ID.css' }
Error seems to originate from line 206 in module.ts If you want to stick with nuxt/font you could debug adobe.ts and file PR to update logic to make it support whatever Adobe changed in the file format that breaks it. Maybe it is the tracking @import declaration?
AngeloK
AngeloKOP•5mo ago
Hi thanks for the reply. Ye I was using nuxt-font-loader before but when testing the site with lighthouse i could improve the metrics. It had to load the adobe font. Knew about nuxt/fonts, as it said in the docs it downloaded the files so i tried it 😄 yep indeed, also tracked it down to that line, but can't seem to figure out what is actually not working.
manniL
manniL•5mo ago
I think raising an issue at nuxt/fonts would be good 👍
brunomgmateus
brunomgmateus•5mo ago
You may need to type the font name with uppercase, as in the adobe fonts name. Like this: 
  fonts: {
    families: [
      {
        name: 'Mulish',
        display: "swap",
        weights: [400, 500, 600, 700, 800, 900],
        provider: 'google'
      },
      {
        name: 'IvyPresto-Display',
        weights: [100, 200, 300, 400, 500, 600, 700],
        provider: 'adobe'
      }
    ],

    adobe: {
      id: ['xxx123']
    },
   }
  fonts: {
    families: [
      {
        name: 'Mulish',
        display: "swap",
        weights: [400, 500, 600, 700, 800, 900],
        provider: 'google'
      },
      {
        name: 'IvyPresto-Display',
        weights: [100, 200, 300, 400, 500, 600, 700],
        provider: 'adobe'
      }
    ],

    adobe: {
      id: ['xxx123']
    },
   }
In your case, may be 'Ador-Hairline' instead of 'ador-hairline'?

Did you find this page helpful?