Custom font for Jasper template (Nav + headers)

Trying to customize my font in the Jasper template with the following code. Any suggestions?

@font-face { font-family: "METROPOLIS"; src: url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e87913a06645e30fa5f/1568173704160/Metropolis-Medium.woff2), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e789da84f77dcfe024c/1568173688518/Metropolis-Medium.woff), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786eaf9da84f77dcfe0813/1568173744007/Metropolis-Medium.otf);}

.Header-nav { font-family: 'METROPOLIS' !important; }

@mplsjen use this code for site title, header nav items

header#header * { font-family: 'METROPOLIS' !important; }

@tuanphan I've had to include a line of code for h1. It changes the font but not the size. (Although it does work in the header#header line)

header#header * { font-family: 'Metropolis' !important; font-size: 22px; }

h1 { font-family: 'Metropolis' !important; font-size: 22px;}

@mplsjen Try

h1 span { font-family: 'Metropolis' !important; font-size: 22px;}

or

h1 * { font-family: 'Metropolis' !important; font-size: 22px;}

@tuanphan this finally worked

h1 { font-family: 'Metropolis' !important; font-size: 22px!important; }