Search code examples
htmlcssfonts

Can I force the browser to use CSS @font-face instead of font installed on system?


Do browsers ignore @font-face if they determine that a CSS-imported font is already installed on the client OS?

I have a number of uncommon fonts installed on my system for design, etc. It would appear that browsers render these fonts with slight differences, depending on whether or not they are installed on the client OS. My guess is that the browser ignores the CSS font import if it determines that the font is already installed on the client OS.

The problem with this is that these rendering distinctions, however slight, can affect spacing, positioning and alignments, causing me to see a different version of a page than visitors. I have to uninstall the font (a pain to do every time) or preview it in a virtual machine (less of a pain, but still a pain).

Is there any way I can tell CSS, "only use this specific font from the CSS import and ignore the font installed on the client OS?"

EDIT : This seems to resolve the issue:

  1. Ensure the CSS @font-face specification uses a different string for font-family than what is installed on the system.

  2. When referencing the font elsewhere in CSS, use:

    font-family: System Installed Font Name, 'Imported Font Name', Fallback Font;


Solution

  • From the edit in my question:

    This seems to resolve the issue:

    1. Ensure the CSS @font-face specification uses a different string for font-family than what is installed on the system.

    2. When referencing the font elsewhere in CSS, use:

      font-family: System Installed Font Name, 'Imported Font Name', Fallback Font;