Is there a cross browser way to include fonts in web applications in 2019?

问题

My five year old java web application has run into problems with fonts, after some work stations has been upgraded to the combination of windows 10 and IE11. The issue is described in detail from Microsofts perspective here. There are several resources describing how to turn off these settings, but I'd like to know if there are any cross browser solutions to keep using specific fonts, with web fonts blocked.

Microsofts suggestions are these two:

On each computer with the app installed, right-click on the font name and click Install. The font should automatically install into your %windir%/Fonts directory. If it doesn’t, you’ll need to manually copy the font files into the Fonts directory and run the installation from there.

This refers to a desktop application, and cannot be done with a web application. It would not have been a satisfactory solution anyway, as it requires active setup action from every user.

On each computer with the app installed, open regedit.exe...

I'm not even going to include the rest, as it has the same problems as the last solution suggestion.

What I have tried:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-
    awesome.css' rel='stylesheet' type='text/css'>

Doesn't work. The css file in reference tries to load the font with the following lines:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

it imports the same font in different formats, to support different browsers. I had hoped that I could continue to use font awesome, simply by downloading the resources, and packing them inside my .war-file. But another font I use this approach for, does not work either:

from my custom-fonts.css:

@font-face {
    font-family: 'Trim';
    src: url('../../resources/fonts/TrimCompleteOT/Trim-Bold.woff') format('woff'),
         url('../../resources/fonts/TrimCompleteOT/Trim-Bold.otf') format('opentype');
    font-weight: 700;
}

But even packaged fonts inside my application, will not load or display.

Is there any way to use custom fonts in a java web application, that does not include turning off security settings, or having to apply settings (like install the fonts) to each individual users computer?

Side note: everything still works in chrome on any windows version, and also in IE11 on non-windows10 computers.

回答1:

If usage of webfonts is disabled in the security settings, there's no real way around them. If there would be, it'd probably be a nasty hack as you'd deliberately circumvent Windows security settings.

Time for Plan B, then. I wrote about this specific issue, and in short you'd have to use nice looking system fonts as fallbacks for text, and an image-based system for icons. E.g. use PNG or SVG images. But if you're going that route you might as well replace the icon font with proper icons for all browsers.

Good luck, and kudos for the nicely written question by the way.

来源：https://stackoverflow.com/questions/54535889/is-there-a-cross-browser-way-to-include-fonts-in-web-applications-in-2019