import all Google fonts
Unanswered
Blue horntail woodwasp posted this in #help-forum
Blue horntail woodwaspOP
import {
Josefin_Slab,
Montserrat,
Open_Sans,
Dancing_Script,
Tangerine,
Courier_Prime,
Ubuntu_Mono,
Marhey,
Sansita_Swashed,
Atma,
Tourney,
} from '@next/font/google';
const josefinSlab = Josefin_Slab();
const montserrat = Montserrat();
const openSans = Open_Sans();
const dancingScript = Dancing_Script();
const tangerine = Tangerine({ weight: ['400', '700'] });
const courierPrime = Courier_Prime({ weight: ['400', '700'] });
const ubuntuMono = Ubuntu_Mono({ weight: ['400', '700'] });
const marhey = Marhey();
const sansitaSwashed = Sansita_Swashed();
const atma = Atma({ weight: ['400', '700'] });
const tourney = Tourney();
<style jsx global>{
Instead of importing and declaring each font seperately how to import entire fonts .
Josefin_Slab,
Montserrat,
Open_Sans,
Dancing_Script,
Tangerine,
Courier_Prime,
Ubuntu_Mono,
Marhey,
Sansita_Swashed,
Atma,
Tourney,
} from '@next/font/google';
const josefinSlab = Josefin_Slab();
const montserrat = Montserrat();
const openSans = Open_Sans();
const dancingScript = Dancing_Script();
const tangerine = Tangerine({ weight: ['400', '700'] });
const courierPrime = Courier_Prime({ weight: ['400', '700'] });
const ubuntuMono = Ubuntu_Mono({ weight: ['400', '700'] });
const marhey = Marhey();
const sansitaSwashed = Sansita_Swashed();
const atma = Atma({ weight: ['400', '700'] });
const tourney = Tourney();
<style jsx global>{
html {
font-family: ${openSans.style.fontFamily};
}
.Josefin_Slab {
font-family: ${josefinSlab.style.fontFamily};
}
.Montserrat {
font-family: ${montserrat.style.fontFamily};
}
.Open_Sans {
font-family: ${openSans.style.fontFamily};
}
.Dancing_Script {
font-family: ${dancingScript.style.fontFamily};
}
.Tangerine {
font-family: ${tangerine.style.fontFamily};
}
.Courier_Prime {
font-family: ${courierPrime.style.fontFamily};
}
.Marhey {
font-family: ${marhey.style.fontFamily};
}
.Sansita_Swashed {
font-family: ${sansitaSwashed.style.fontFamily};
}
.Atma {
font-family: ${atma.style.fontFamily};
}
.Tourney {
font-family: ${tourney.style.fontFamily};
}}</style>Instead of importing and declaring each font seperately how to import entire fonts .
1 Reply
Orinoco Crocodile
can you try something like this if it helps:
import * as NextFonts from '@next/font/google';
const fonts = {
Josefin_Slab: NextFonts.Josefin_Slab(),
Montserrat: NextFonts.Montserrat(),
Open_Sans: NextFonts.Open_Sans(),
Dancing_Script: NextFonts.Dancing_Script(),
Tangerine: NextFonts.Tangerine({ weight: ['400', '700'] }),
Courier_Prime: NextFonts.Courier_Prime({ weight: ['400', '700'] }),
Ubuntu_Mono: NextFonts.Ubuntu_Mono({ weight: ['400', '700'] }),
Marhey: NextFonts.Marhey(),
Sansita_Swashed: NextFonts.Sansita_Swashed(),
Atma: NextFonts.Atma({ weight: ['400', '700'] }),
Tourney: NextFonts.Tourney(),
};
const fontStyles = Object.keys(fonts)
.map((font) => `.${font} { font-family: ${fonts[font].style.fontFamily}; }`)
.join('\n');
const GlobalFontStyles = () => (
<style jsx global>
{`
html {
font-family: ${fonts.Open_Sans.style.fontFamily};
}
${fontStyles}
`}
</style>
);
export default GlobalFontStyles;