Download font files in case site goes offline - css

Question

I am developing an Angular application that shows content from a certain custom font file if the user goes offline at any point. The font file is referenced in a CSS file.
The trouble is that the custom font file is not downloaded till it comes time to display the content about the fact that the user is offline, but at that point the user is already offline and the font file obviously cannot be downloaded. The relevant CSS section is below.
Any hints on if there is a way to download the font files before hand?
#font-face {
font-family: 'someFamily';
src: url('fonts/someFamilyIcons.eot'),
url('fonts/someFamily.ttf') format('truetype'),
url('fonts/someFamily.woff') format('woff'),
url('fonts/someFamily.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Answer 1

You can use a file to base64 encoder and load your font that way.
This could potentially help.
Once you have a base64 string, you can load it onto your site like so:
#font-face {
font-family: 'someFamily';
src: url('fonts/someFamilyIcons.eot'),
src: url(data:application/x-font-woff;charset=utf-8;base64,THE_BASE64_STRING) format('woff');
font-weight: normal;
font-style: normal;
}

Answer 2

#font-face { font-. family:'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('webfont.woff2') format('woff2'),
/* Super Modern Browsers */ url('webfont.woff') format('woff'),
/* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'),
/* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */ }`
I would also suggest this line of code for further support with different browser because some browsers may not support your fonts or if the font site is down you won't have to worry about the change of fonts later
body { font-family: 'MyWebFont', Fallback, sans-serif; }
Here is a link for reference:
CSS tricks font reference