title: TypeScript font import, error with link tag property crossorigin
body: <p>How can I resolve this typscript error when importing a custom font (e.g. google font).</p>
  <pre><code>&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
  </code></pre>
  <p>Here the details of the error:</p>
  <pre><code>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&lt;LinkHTMLAttributes&lt;HTMLLinkElement&gt;, HTMLLinkElement&gt;'
  </code></pre>
  <hr />
  <p>Fix:</p>
  <ul>
  <li>the property is: crossOrigin, not crossorigin (O is capitalized)</li>
  <li>crossOrigin accepts a string. If you add crossOrigin in the link tag <code>&lt;link ... crossOrigin /&gt;</code> you are writing this is a boolean (expecting a true or false) whereas it takes a string. That is why setting it to crossOrigin=&quot;anonymous&quot; would work for example</li>
  <li>as since v10.2, Next.js has built-in web font optimization, meaning you can remove it and it will work</li>
  </ul>