Loading either the online or offline version of a font

Hey all. I'm using Twine 2.0.11 with SugarCube 2.7.2. What I want to do is be able to load an online version of a font if someone is playing an online version of my game, but load a locally-stored (ships with the zip file which contains the HTML file of the game) version of the font if a person is playing the offline version. I'm loading the online version from Google Fonts which works fine, like so:

@import 'https://fonts.googleapis.com/css?family=Quantico';
html {
	font-family: Arial;
	font-family: 'Quantico', sans-serif;
}

Now for the offline version, I'm trying to load in the local version of the Quantico font (located at Fonts/Quantico-Regular.ttf, relative to my game file) like so:

@font-face {
	font-family: 'Quantico_off', sans-serif;
	src: url('Fonts/Quantico-Regular.ttf') format('ttf');
}

I'm naming it "Quantico_off" so as to properly differentiate it from the online version of the font being loaded from Google Fonts. However, when I go offline to make sure it's working properly (i.e., not loading the online version instead), it never works. It only seems to default to Arial. Is there any way to successfully do this? Thanks so much, I know I post here a lot haha.

- dtraposo