preloading font but different file types

I want to preload font styles. In my css I use:

    /* montserrat-700 - latin */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 700;
      src: url('../fonts/montserrat-v25-latin-700.eot');
      src: local(''),
        url('../fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'),
        url('../fonts/montserrat-v25-latin-700.woff2') format('woff2'),
        url('../fonts/montserrat-v25-latin-700.woff') format('woff'),
        url('../fonts/montserrat-v25-latin-700.ttf') format('truetype'),
        url('../fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg');
    }

    /* quicksand-regular - latin */
    @font-face {
      font-family: 'Quicksand';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/quicksand-v30-latin-regular.eot');
      src: local(''),
        url('../fonts/quicksand-v30-latin-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/quicksand-v30-latin-regular.woff2') format('woff2'),
        url('../fonts/quicksand-v30-latin-regular.woff') format('woff'),
        url('../fonts/quicksand-v30-latin-regular.ttf') format('truetype'),
        url('../fonts/quicksand-v30-latin-regular.svg#Quicksand') format('svg');
    }

    /* quicksand-500 - latin */
    @font-face {
      font-family: 'Quicksand';
      font-style: normal;
      font-weight: 500;
      src: url('../fonts/quicksand-v30-latin-500.eot');
      src: local(''),
        url('../fonts/quicksand-v30-latin-500.eot?#iefix') format('embedded-opentype'),
        url('../fonts/quicksand-v30-latin-500.woff2') format('woff2'),
        url('../fonts/quicksand-v30-latin-500.woff') format('woff'),
        url('../fonts/quicksand-v30-latin-500.ttf') format('truetype'),
        url('../fonts/quicksand-v30-latin-500.svg#Quicksand') format('svg');
    }

    /* quicksand-600 - latin */
    @font-face {
      font-family: 'Quicksand';
      font-style: normal;
      font-weight: 600;
      src: url('../fonts/quicksand-v30-latin-600.eot');
      src: local(''),
        url('../fonts/quicksand-v30-latin-600.eot?#iefix') format('embedded-opentype'),
        url('../fonts/quicksand-v30-latin-600.woff2') format('woff2'),
        url('../fonts/quicksand-v30-latin-600.woff') format('woff'),
        url('../fonts/quicksand-v30-latin-600.ttf') format('truetype'),
        url('../fonts/quicksand-v30-latin-600.svg#Quicksand') format('svg');
    }

And I preload fonts in index.html with:

 <link rel="preload" href="../fonts/montserrat-v25-latin-700.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="../fonts/quicksand-v30-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="../fonts/quicksand-v30-latin-500.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="../fonts/quicksand-v30-latin-600.woff2" as="font" type="font/woff2" crossorigin>

I have all the .ttf .eot .woff .woff2 files in my project. My question is do I have to preload all the different types of files, or just preloading .woff2 is enough? I do not know what is the difference betweeen .ttf .eot .woff .woff2. Do I have to do:

<link rel="preload" href="../fonts/montserrat-v25-latin-700.ttf" as="font" type="font/ttf" crossorigin>
  <link rel="preload" href="../fonts/quicksand-v30-latin-regular.ttf" as="font" type="font/ttf" crossorigin>
  <link rel="preload" href="../fonts/quicksand-v30-latin-500.ttf" as="font" type="font/ttf" crossorigin>
  <link rel="preload" href="../fonts/quicksand-v30-latin-600.ttf" as="font" type="font/ttf" crossorigin>