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

Question

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 instal

Answer 1

Whenever you implement your own font-face the browser will use it. You don't need to force it, because your font can have the same name but this doesn't mean that it is the same font as installed. Therefore it makes no difference if the font is installed or not, the browser will use what is defined in @font-face.

If the browser has issues using your font with the same name as an installed font - what never happened to me as long as I do this - rename it. This will do the trick.

The browser will just fall back to a system font if your font is not usable or not correctly defined.

EDIT: I just wanted to say that I made lot's of website with fonts that where installed on our test systems and the browsers never used the installed fonts.

Answer 2

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;

Answer 3

Make sure you take in account font variations (bold, italic).

I solved it this way:

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}