@lavollmer
Posted
Hi Wangai!
Good job on your first project!
Getting the fonts from frontend Mentor to work was a little challenging. I first used https://transfonter.org/ to change the files into the appropriate type - WOFF and WOFF2 files. You then import those files in your assets folder - you can label them whatever you like.
Once, that is complete, then you will have to import them into your tailwind css config file in your project like so within in the module.exports section -
theme: { extend: { fontFamily: { 'inter-regular': ['Inter-Regular', 'sans-serif'], 'inter-bold': ['Inter Bold', 'sans-serif'], 'inter-extra-bold': ['Inter ExtraBold', 'sans-serif'], } }, },
You will also need to import each file into your app.css file BEFORE your tailwind css utilities code within the file. This is an example of what it should look like for each font (you will need to have 3 of these - one for each font type):
@font-face { font-family: 'Inter-Regular'; src: url('./assets/font/Inter-Regular.woff2') format('woff2'), url('./assets/font/Inter-Regular.woff') format('woff'); font-weight: 100; font-style: normal; }
The url is the pathway to the font in your project. Change each url to match your path in your code. Hope this works! Thanks!
Marked as helpful
