# Using your own font filesīut what if you have font files instead of a CDN? The process changes a bit, but it's still pretty similar.įor our template Elyssi we had this issue, here’s what we did: we created a fonts folder in our assets folder and put our files there. Understanding CSS Inheritance (Inherit, Initial, Unset, and Revert) Relationships exist in HTML, and these relationships make it possible for us to select and style the elements of a web page. You can use these same steps for fonts from Typekit too, just grab the CDN, convert their font naming to an array and add it to your Tailwind config. Each element will inherit it from the HTML element. This way, you don't have to keep repeating the font class over and over. I go into my main CSS file and write this: html font-body
There's also a trick I use if I'm using a single font or a default font. exports =, in the case it would be font-body. Now, the default tailwind config has some fonts already configured, and I usually overwrite them, but for this example, I'll put my code on the extend section of the config.
I paste that into the of my project and grab the CSS for the name of the font from Google fonts, in this case, is font-family: 'Open Sans', sans-serif. I always use the version which would give me the following snippet: For this example I’ll just use 2 styles, regular (400) and bold (700). Let’s say you want to use the Open Sans font from Google Fonts as part of your project.
#Css inherit font how to
I see a lot of people with confusion on how to use custom fonts with Tailwind CSS since tailwind has a bit different approach to CSS in general instead of multiple stylesheets, you tend to have a Javascript file with all the config and very little custom CSS.īut trust me, using custom fonts with tailwind is very straightforward here's how you can do it: # Using Google Fonts
0 kommentar(er)
