Fonts and social media icons

[danielmarostica]

Hi, my website is not rendering fonts nor social media icons. What do you think could be the cause?

[th3c0d3br34ker]

A probable reason could be conflicting fontawesome files. You could try and remove the font-awesome import from the index.js file. It should work as font-awesome css link is mentioned in index.html file. Before pushing your changes, you could do npm run start and see your website on local host. There is a high chance that you'll find the error there.

[danielmarostica]

On local host, the fonts and social media icons are loaded correctly. However, if I comment import "./assests/font-awesome/css/all.css"; in src/index.js, the fonts are still loaded, but the icons get messed up.

After npm run build, I uploaded the build folder to the website. That's when fonts and icons stopped working. After the build.

I tried also npm run deploy and set gh-pages as default, but it didn't help.

node v12.18.2 npm 6.14.5

[danielmarostica]

Here's an output of npm install

npm WARN bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself. npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/jest-haste-map/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.0.7 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.0.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

audited 1867 packages in 8.525s

46 packages are looking for funding run npm fund for details

found 3473 vulnerabilities (3470 low, 2 moderate, 1 high) run npm audit fix to fix them, or npm audit for details

[danielmarostica]

I think this might help, but I don't know how to apply it to this project.

[th3c0d3br34ker]

This output of npm install doesn't have anything to worry about.
I you could upload the code on github then it would help to debug your code.

[th3c0d3br34ker]

No, the folder which contains the src , public and package.json.

[danielmarostica]

Sure> https://github.com/danielmarostica/temp_repo

[th3c0d3br34ker]

Sure> https://github.com/danielmarostica/temp_repo

I meant your copy of the this repo. 😃 Not just these files.

[danielmarostica]

I figured out a workaround.

I changed all the paths inside the chunk.css from danielmarostica.github.io/static/media/GoogleSans-Bold.4457817a.ttf... to ../media/GoogleSans-Bold.4457817a.ttf. Voilà.

I don't know how to compile it correctly, though.

[th3c0d3br34ker]

I just cloned and ran your repository. It seems to work fine.

[danielmarostica]

Locally, it always did. The problem with fonts shows up when online.

[danielmarostica]

The problem was a missing https:// in the package.json file... It is solved now. Thank you @th3c0d3br34ker