Fonts - Local hosting - how to?

[Connie]

Dear Friends,

I am not so into website work anymore as I am pensioneer and work mostly non-digital anymore...
I knew how to include local hosted fonts, but today I am not succesfull


I need to host google fonts locally on the website of a friend, as you know the use of external data is quite sensitive and a problem in the EU...

1) I  take off the link to the google fonts in inc_header.php
2) I have downloaded the necessary fonts  from https://google-webfonts-helper.herokuapp.com
3) but now I am confused how to reference the font-face in the css-file (I knew it once, but I forgot)

Where should I upload the fonts to and how to reference in the css-file?

my directory structure was:

the theme: /htdocs/theme/my_theme
the fonts: /htdocs/theme/fonts/

an example for Cantarell Font in normal style, size 400:


@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cantarell-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../fonts/cantarell-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../fonts/cantarell-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
      url('../fonts/cantarell-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
      url('../fonts/cantarell-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../fonts/cantarell-v17-latin-regular.svg#Cantarell') format('svg'); /* Legacy iOS */
}


the page did not load the google fonts from Google directly, but also did not read "my" fonts ..

please help me out!

All the best, Connie