Using fonts, Fontawesome and another with React served through Apache 2.4.x

Posted June 28, 2020 747 views

I’ve created a React app connecting to a back end Rails API. Everything works great on my local machine when running react using the bundled development server. When I deployed to my Apache server it works but I have 2 issues.

  1. The icons from Fontawesome are not showing up.
  2. I use the Poppins font and while it looks like it’s being used, the view is showing me a different size from that running through my development server.

I’m sure there’s some deployment options I’m missing. Searching SO showed me to embed a link to fontawesome and add to .htaccess.

Added this to my index.html:

<link href="http://localhost:8080/files/applications/CADRe/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">

Added this to my .htaccess file:

AddType application/ eot
AddType font/truetype ttf
AddType application/x-font-woff woff

Thanks in advance.

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
1 answer

Hi @bill.snapper,

You should start by checking your browser console for errors. At the moment, I can’t think of anything specific which might be causing such issues but when I experience such issues, I’ll start by going to the console. For these cases, I usually use google chrome’s console as it gives me the errors the clearest.

In there you should be able to see what’s going on. Is it a wrong path, is it some permissions issues, is not being able to load it up and why.

Please let me know your findings, this one is a peculiar case.