nuxt-modules / og-image

Generate OG Images with Vue templates in Nuxt.
https://nuxtseo.com/og-image
361 stars 23 forks source link

Google Fonts with a `+` in the name are broken #125

Closed tydeu closed 6 months ago

tydeu commented 6 months ago

Describe the bug

Using a Google Font with a + in the name (such as Noto+Sans used in the custom fonts documentation) is broken. The font will produced a 404 error in the playground. This is because the following line of code only uppercases the first letter of the font name:

https://github.com/harlan-zw/nuxt-og-image/blob/dd42f7b16c0f7f34dd8aa132dd1736edf6b38f1b/src/runtime/server/routes/__og-image__/font-%5Bname%5D-%5Bweight%5D.%5Bextension%5D.ts#L16

Changing it to something like the following should fix this (at least it did on my machine):

const name = _name.split('+').map(w => w[0].toUpperCase() + w.slice(1)).join('+')

You might also want to update the custom fonts test to also include the Noto+Sans examples from the documentation.

Reproduction

No response

System / Nuxt Info

No response

harlan-zw commented 6 months ago

Hi @tydeu

Thank you for the issue. This should be fixed in v3.0.0-rc.10 as well as an issue with changing the font-family. Let me know if you have any issues.

tydeu commented 6 months ago

@harlan-zw Thanks a bundle!