Astro Tutorial: Add Google Fonts to Astro Tailwind CSS Projects (2023)
Notes:
1. Make sure you have tailwind installed: npx astro add tailwind
2. Find a font via fontsource, example: https://fontsource.org/fonts/twinkle-... (You can find most, if not all Google fonts here)
3. npm install @fontsource/twinkle-star
4. import '@fontsource/twinkle-star';
5. Update tailwind config
5a. Import tailwind's default theme (this should provide fallbacks for the the Twinkle Star font if it doesn't work)
5b. Add the font family "Twinkle Star" into the correct font type (serif)
6. Use the font family on an element, ie body tag: class="font-serif"
Docs:
https://docs.astro.build/en/guides/fo...
https://fontsource.org/fonts/twinkle-...
https://docs.astro.build/en/guides/in...
On this page of the site you can watch the video online Astro Tutorial: Add Google Fonts to Astro Tailwind CSS Projects (2023) with a duration of hours minute second in good quality, which was uploaded by the user Anthony Ngo 19 September 2023, share the link with friends and acquaintances, this video has already been watched 4,646 times on youtube and it was liked by 41 viewers. Enjoy your viewing!
