The "font-synthesis" CSS property prevents browsers from artificially bolding or italicizing text when true bold or italic font faces are missing. This is crucial for preserving the intended design and visual hierarchy of your web fonts, enhancing overall UI consistency and user experience.
body {
font-family: "MyCustomWebFont", sans-serif;
font-synthesis: none; /* Prevents all artificial bold/italic synthesis */
}
/* Example for specific elements to ensure strict font usage */
h1 {
font-weight: 700; /* Assumes a defined 700 weight */
font-synthesis: none; /* Explicitly prevent synthesis if 700 isn't available */
}