fa96d870aa
Fixes local weight type which could break if you wrote "regular" instead of 400. Adds `variable` property to google font loader to let you define the name of the CSS variable. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
25 lines
650 B
JavaScript
25 lines
650 B
JavaScript
import { Open_Sans } from '@next/font/google'
|
|
const openSans = Open_Sans({
|
|
fallback: ['system-ui', 'Arial'],
|
|
variable: '--open-sans',
|
|
})
|
|
|
|
export default function WithFonts() {
|
|
return (
|
|
<>
|
|
<div id="with-fallback-fonts-classname" className={openSans.className}>
|
|
{JSON.stringify(openSans)}
|
|
</div>
|
|
<div id="with-fallback-fonts-style" style={openSans.style}>
|
|
{JSON.stringify(openSans)}
|
|
</div>
|
|
<div
|
|
id="with-fallback-fonts-variable"
|
|
style={{ fontFamily: 'var(--open-sans)' }}
|
|
className={openSans.variable}
|
|
>
|
|
{JSON.stringify(openSans)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|