We are using SVG-Icon font to display icons in the react web application, but sometimes icons are showing wired in the UI even though fonts are loaded in the browser. Please see attached screenshot. Its showing Times New Roman as font, not sure why?
Asked
Active
Viewed 227 times
0
-
An svg icons file in ttf format? What wizardry is this? – Parapluie Oct 02 '20 at 16:43
-
Yes @Parapluie, its in ttf format. please see the attached screenshot. – Joshi Oct 02 '20 at 17:28
-
So it's a ttf file. No problem. Is `svg-icons.6999eb79.ttf` the exact file name on the server? If so, that is not the file name that you have requested in your `@font-face`. If the `6999eb79` is also loaded somewhere else, then you may not receive a missing resource notification in your console. – Parapluie Oct 02 '20 at 17:47
-
Yes, `svg-icons.6999eb79.ttf` is the exact file name, this number `6999eb79 ` appends due to versioning/caching. – Joshi Oct 02 '20 at 18:54
-
With what you have shown us, I can see nothing wrong with the code except for this. Do you have more information? What is the console source of that `6999eb79` image? It's not one I use. – Parapluie Oct 02 '20 at 19:15
-
Yeah, I also don't see any issues but still, sometimes it is happening and not able to find the root cause of it. – Joshi Oct 02 '20 at 19:46
-
Using your browser's console, can you right-click the h2 element that we are discussing and select *Inspect Element*? You should be able to see a vertical list of all of the class/id styles that affect that particular element **in cascading order.** This should allow us to see the exact point in the cascade where the font is applied and your desired link is broken. Are you able to share that particular screen shot(s)? That *might* be part of it, near the upper-left of your first image — but too much context is missing to accurately identify the problem. – Parapluie Oct 05 '20 at 12:44