search

dirkolbrich / hugo-tailwindcss-starter-theme

Starter files for a Hugo theme with Tailwindcss
MIT License
402 stars 55 forks source link

QUESTION: fonts #34

Closed wackazong closed 3 years ago

wackazong commented 3 years ago

If I want to include external fonts, do I just use a @font-face declaration and point it to a font file in static? Is that a viable way to go or does it have any implications on tailwind. I see that in tailwind it is recommended to enclose the font in a @layer directive (https://tailwindcss.com/docs/adding-base-styles). That can be done in the site.css file. It works for me like this, I would just like to know whether this is best practice or not. Thanks!

dirkolbrich commented 3 years ago

I add external fonts within a /fonts folder under /static. There I specify a fonts.css file and declare the font with a @font-face rule. The fonts.css is added to the site before the styles.css. Works on my machine™.

<head>
    <link rel=stylesheet type=text/css charset=utf-8 href=https://mysite/fonts/fonts.css>
    <link rel=stylesheet href=https://mysite/css/styles.css>
</head>

I haven’t used the @layer rule within a Tailwind setup, so I can not say what is best practice and what not.

wackazong commented 3 years ago

Ok, thanks!