Using google font in Tailwindcss

Using google font in Tailwindcss

How to add google font in tailwindcss

sveltekit
Svelte
google font
  1. Select google font
  2. Paste google font provided link stylesheet in the html page
    <!-- google font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Edu+QLD+Beginner&display=swap" rel="stylesheet">
  3. Open the tailwind config file & add the code under extend
    theme: {
       extend: {
             fontFamily: {
                      'tera-font' : ['Edu QLD Beginner','cursive']
                         }
                }
    },
  4. Now anywhere in the code base just add the class font-tera-font