So, I (kinda) understand font fallback, but I'm hoping there's a way to get custom fonts to fallback to inherited fallback, instead of explicitly defining the custom font fallback within each class that needs it.

My question is why does the 3rd <div> tag in the code below output Times New Roman text, when I've set the default to be Helvetica, Arial, sans-serif?

HTML Code:

body {
	font-family: Helvetica, Arial, sans-serif;

.myCustomFont {
	font-family: my_custom_font;

.anotherCustomFont {
	font-family: another_custom_font;

@font-face {
    font-family: my_custom_font;
    src: url('My Custom Font.otf') format('opentype');
    font-weight: normal;
    font-style: normal;


<div>Hello, World!</div> // Output: Helvetica
<div class="myCustomFont">Hello, World!</div> // Output: My Custom Font
<div class="anotherCustomFont">Hello, World!</div> // Output: Times New Roman!?!?