How to add fonts to create-react-app based projects?

How to Add Fonts to create-react-app Based Projects?

📝 Intro: So, you're working on a project using create-react-app, and you want to add some custom fonts without ejecting? Don't worry, I got you covered! 🎉

🤔 The Problem: The issue is, when importing fonts via @font-face and loading them locally, it's not clear where the fonts should go in your project structure. 😕

🔎 The Solution: Here's a step-by-step guide to help you add fonts to your create-react-app based projects:

1. Create a "fonts" folder in your public/static directory.

   • Open your project in your favorite code editor.

   • Navigate to the "public" folder.

   • Inside the "public" folder, create a new folder called "static".

   • Inside the "static" folder, create another folder called "fonts".

2. Place your font files in the "fonts" folder.

   • Find or download the font files you want to use (e.g., .woff files).

   • Move the font files into the "fonts" folder you created in the previous step.

3. Update your CSS to reference the font files.

   • Open the CSS file where you want to use the custom fonts (e.g., GameModule.css).

   • Use the @font-face rule to define the custom fonts.

   • In the src property, provide the local font name and the URL to the font file.

   • Use the %PUBLIC_URL% placeholder to reference the "public" folder.

   • For example:

     @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff'); }

4. Use the custom font in your project.

   • Now that you have defined the custom font, you can use it just like any other font.

   • For example, you can apply it to specific elements using the font-family property.

That's it! 🎉 You have successfully added custom fonts to your create-react-app based project without ejecting. 🙌

🎉 Call-to-Action: Now that you know how to add fonts to your create-react-app based projects, why not give it a try? ✨ Share your experience or any cool font choices you made in the comments below. Let's inspire each other! 💬💡

Happy coding! 👩‍💻🎨