Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

fonts

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;

like image 555
Recovering Nerdaholic Avatar asked Sep 21 '14 12:09

Recovering Nerdaholic


People also ask

How do I use Google fonts with font face in CSS?

Linking fonts directly in the CSS To load fonts directly into the stylesheets, we use the @font-face property. Instead of using the font's link in the HTML document, enter the link into the URL bar in the browser. The browser then loads the CSS rules you will need for your stylesheet.

How do I use face fonts in HTML?

You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.


1 Answers

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;

like image 180
Recovering Nerdaholic Avatar answered Sep 19 '22 05:09

Recovering Nerdaholic