When your seeing one font but someone else is seeing another — Trouble shooting for Front end Devs

holly bourneville
2 min readMay 10, 2021

--

Heads up — its probably a system font.

This is something that used to happen occasionally in my job. I would have fonts displaying perfectly on my screen and differently on someone else's. Sometimes the difference was so minimal only someone with an eye for design would pick it up.

Usually the reason why the font would be working on my screen was because it was being pulled from my desktop/system as I had downloaded the font files onto my system when I was working on the mock up from design.

You can use the Firefox dev tools to check if this is whats happening.

To do this, simply -

  • open the page in Firefox
  • right click on the font
  • choose inspect element.
  • Make sure your inspecting panel has enough room to display everything fully. You can expand it out by hovering your mouse over the lines in the panel and clicking to hold then dragging or you can open it in a separate window.
  • In the panel in the right hand corner that usually shows layout, click to view font instead. In this space it will show you the font name (as shown below).

If you and the other person testing the font are seeing different fonts, it probably means that one of your computers is pulling the font from the system instead of the web.

This then means you need to investigate why the font isn't working as expected (usually for me it was an error loading the font).

I hope this helps!

Happy coding 😊

--

--

holly bourneville

Hi Im Holly! I’m from New Zealand. I’m in my first job as a Front End Web Developer and want to share my learnings and thoughts along the way!