Which are the correct font files to load?

Question

I'm currently hosting Material Icons fonts locally and in my fonts folder I have the following files.

MaterialIcons-Regular.svg
MaterialIcons-Regular.ttf
MaterialIcons-Regular.woff
MaterialIcons-Regular.woff2

If I am only supporting new browsers and IE11+ Do I need all these files ?

Also .svg file is quite large 276kb, and webpack bundler complaining about the size of the file. Which browser would choose the .svg font ?

Font loaded in css as follows :

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src:
    local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(../fonts/MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

Is .svg font > .woff2 > .woff ?

Answer 1

woff and woff2 are the two font types towards which things are getting inclined.

So, woff and woff2 will cover new browsers or specifically:

Chrome  Safari  Firefox Opera   IE  Android iOS
5+      5.1+    3.6+    11.50+  9+  4.4+    5.1+

Answer 2

http://caniuse.com/#feat=svg-fonts that list of browsers what use the svg