Best way to use local fonts in style.css?

Tom,

I posted in another thread about preconnecting sites for Google Fonts. I found a couple websites for downloading fonts from Google and hosting them locally. What is the best way to use a custom font family in the style.css to cover all fonts on the site? I was going to use the following CSS.

@font-face {
  font-family: 'Oxygen';
  src:  url('fonts/oxygen.woff2') format('woff2'),
        url('fonts/oxygen.woff') format('woff'),
        url('fonts/oxygen.ttf') format('truetype');
        url('fonts/oxygen.svg#Oxygen') format('svg');
}

@font-face {
  font-family: 'OxygenMono';
  src:  url('fonts/oxygen_mono.woff2') format('woff2'),
        url('fonts/oxygen_mono.woff') format('woff'),
        url('fonts/oxygen_mono.ttf') format('truetype');
        url('fonts/oxygen_mono.svg#OxygenMono') format('svg');
}
body,
button,
input,
select,
textarea, 
html {                                                                                                                                                                                                                                        
  font-family: 'Oxygen';
}