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

Question

Should browsers ignore @font-faceif they determine that a font imported into CSS is already installed on the client OS?

I have a number of unusual fonts installed on my system for design, etc. Obviously, browsers display these fonts with slight differences depending on whether they are installed on the client OS or not. I assume that the browser ignores importing the CSS font if it determines that the font is already installed on the client OS.

The problem is that these rendering differences, albeit minor, can affect spacing, positioning, and alignment, forcing me to see a different version of the page than visitors. I need to remove the font (pain to do every time) or view it on a virtual machine (less pain, but pain anyway).

Is it possible to somehow indicate CSS, "use this particular font only from CSS import and ignore the font installed on the client OS? "

EDIT: This seems to solve the problem:

• Make sure that the CSS specification @font-faceuses a different line for font-familythan what is installed on the system.

• When linking to a font elsewhere in CSS, use:

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

Answer 1

:

, , :

• , CSS @font-face font-family, , .

• CSS :

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

Answer 2

, , . , , , , . , , , @font-face.

, - , - . .

, .

EDIT: , , , .

Answer 3

Make sure that you consider the font options in your account (bold, italics).

I solved it like this:

@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");
}