How can I resolve this typscript error when importing a custom font (e.g. google font).
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Here the details of the error:
Type 'boolean' is not assignable to type 'string'.ts(2322)
index.d.ts(2279, 9): The expected type comes from property 'crossOrigin' which is declared here on type 'DetailedHTMLProps<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>'
Fix:
- the property is: crossOrigin, not crossorigin (O is capitalized)
- crossOrigin accepts a string. If you add crossOrigin in the link tag
<link ... crossOrigin />you are writing this is a boolean (expecting a true or false) whereas it takes a string. That is why setting it to crossOrigin="anonymous" would work for example - as since v10.2, Next.js has built-in web font optimization, meaning you can remove it and it will work