Why aren't my custom fonts loading properly?

[Bronbron]

Hi there,

I need some urgent help! My custom fonts are not loading properly and I cannot figure out why. 

This is the code I have in custom.css...

@font-face {   
	font-family: 'Founders Grotesk Regular';   
	src: url('{{ 'FoundersGroteskRegular.eot' | asset_url }}');   
	src: url('{{ 'FoundersGroteskRegular.eot?#iefix' | asset_url }}') format('embedded-opentype'),
		 url('{{ 'FoundersGroteskRegular.woff' | asset_url }}') format('woff'),  
  		 url('{{ 'FoundersGroteskRegular.woff2' | asset_url }}') format('woff2');
}

@font-face {   
	font-family: 'Founders Grotesk Medium';   
	src: url('{{ 'FoundersGroteskMedium.eot' | asset_url }}');   
	src: url('{{ 'FoundersGroteskMedium.eot' | asset_url }} ?#iefix') format("embedded-opentype"),
		 url('{{ 'FoundersGroteskMedium.woff' | asset_url }}') format("woff"),
    	 url('{{ 'FoundersGroteskRegular.woff2' | asset_url }}') format("woff2");
}

body, *, .footer-content a {
  font-family: 'Founders Grotesk Regular', sans-serif !important;
  color: black;
  letter-spacing: normal !important;
}

header, .site-header, h1, h2, h3, h4, h5, h6, .custom-font, .h1, .h2, .h3, .h4, .h5, .h6, .header-font, .site-nav--link-text, .top-links ul li, .homepage-sections--title, .btn, footer, .footer-header, .wetheme-dropdown, .page--title {
  font-family: 'Founders Grotesk Medium', sans-serif  !important;
  color: black;
  letter-spacing: normal !important;
}

.top-links ul.site-nav, .header--supporting-text, .site-nav--link-text, .h4, .page--title, .selected, .wetheme-dropdown ul li.selected  {
  font-size: 1rem;
  font-weight: 500;
}

.btn, button {
  text-transform: uppercase !important;
}
  

The font-family part is working, but it is just loading sans-serif, not the Founders Grotesk. 

Any suggestions?

Thanks!