Font

Steps to be followed to change font in the template:

  • You can define multiple sources for the same font family, each with a different fontStyle.
  • To change the font family you will have to import the font at templates/components/partials/head.hbs file. You can also import particular google fonts. After adding font url you have to update that particular font at src/theme/config.js

Here is the Change font from template in tailwind

head.hbs 
<!-- 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=Inter:wght@300;400;500;700&display=swap`" rel="stylesheet">
config.js 
fontFamily: {
    sans: [
        '"Inter"',
        "system-ui",
        "sans-serif",
        "-apple-system",
        '"Segoe UI"',
        '"Helvetica Neue"',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
    ],
    mono: [
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "Consolas",
        '"Liberation Mono"',
        '"Courier New"',
        "monospace",
    ],
},
Previous Next