This example shows how I added google fonts Rubik as the default font family in a React project. Step 1: Get Google Fonts css code Go to Google Fonts, and search the target font ('Rubik' here); Click the found font to open the font family page, then click + Select this style button to choose ideal font styles. The selected font families with styles import code will appear on the right of this page; Find and copy the <link> or @import code for importing font family's stylesheet Step 2: Import the font css in /public/index.html Note that I don't use @font-face to add the font family here, I use the link tag to import the remote stylesheet. The code is added in the head part of the html file. Step 3: Extend added font families into the Tailwind default theme in tailwind.config.js Note that I don't override the default provided font families. And this will get the fallback font families once failure of loading customized fonts. Step 4: Set customized font family as the app's default font Add the following code in the root css file, mine is index.scss (the file which imports Tailwind utities) Reference https://tailwindcss.com/docs/font-family

2021年04月28日 0Comments 313Browse 0Like Read more