Google Fonts
Every Google Font as a LAYR font value: font: GoogleFonts.Fraunces loads the family on first use.
layr add google_fontsEvery Google Font as a LAYR font value. Name the family and font: takes it; the stylesheet is added to the page the first time a family is used.
import { GoogleFonts } from '@dynshift/layr-google-fonts'
Text(.config(font: GoogleFonts.Fraunces, size: 40, weight: 600) .obj('Layout, authored.'))Naming a family
Write the family name without spaces: GoogleFonts.SpaceGrotesk is "Space Grotesk", GoogleFonts.IBMPlexSans is "IBM Plex Sans". For a name that doesn't survive that (digits, odd capitals), or to choose weights, use GoogleFonts.font:
import { GoogleFonts } from '@dynshift/layr-google-fonts'
Text(.config(font: GoogleFonts.font('M PLUS Rounded 1c', weights: [400, 800]), size: 28) .obj('Rounded'))| Option | Meaning |
|---|---|
weights | Weights to load, e.g. [400, 700]. By default every weight the family has. |
italic | Also load the italics. |
fallback | The generic stack shown until the font arrives. Guessed from the name (Mono → monospace, serif families → serif). |
Faster first paint
Families load when a page first uses them. For the fonts on your first screen, put the stylesheet in index.html so a prerendered page starts downloading before any script runs:
import { href } from '@dynshift/layr-google-fonts'
href('Fraunces', 'Space Grotesk')
// https://fonts.googleapis.com/css2?family=Fraunces:wght@100..900&family=Space+Grotesk:wght@100..900&display=swapFonts are served by Google. If your privacy policy needs self-hosted files, download the family and use it by name with font: 'Family' and a @font-face rule instead.
import { GoogleFonts } from '@dynshift/layr-google-fonts'
// Colours are theme tokens (src/app.layr sets them for this gallery), so the page follows the
// reader's theme: light or dark here, and the site's theme on layr.dynshift.com.
Page(
.name(Specimen)
.route('/')
Scaffold(
.config(color: canvas)
.body(Column(
.config(w: fill, padding: all(32), gap: 28)
Column(
.config(gap: 6)
Text(.config(size: 13, color: faint, font: GoogleFonts.JetBrainsMono) .obj('Fraunces · 600'))
Text(
.config(size: 56, weight: 600, letterSpacing: -1.5, lineHeight: 1, color: ink, font: GoogleFonts.Fraunces)
.obj('Layout, authored.')
)
)
Row(
.config(w: fill, gap: 24, yAlign: stretch)
Column(
.config(w: fill, gap: 8, padding: all(20), cornerRadius: 12, color: sunken)
Text(.config(size: 13, color: muted, font: GoogleFonts.JetBrainsMono) .obj('Space Grotesk'))
Text(.config(size: 26, weight: 500, color: ink, font: GoogleFonts.SpaceGrotesk) .obj('Numbers flow, structure steps.'))
)
Column(
.config(w: fill, gap: 8, padding: all(20), cornerRadius: 12, color: panel)
Text(.config(size: 13, color: muted, font: GoogleFonts.JetBrainsMono) .obj('Instrument Serif'))
Text(.config(size: 30, color: accent, font: GoogleFonts.InstrumentSerif) .obj('One meaning per line.'))
)
)
))
)
)