Fonts listed in CSS are not appearing

Why are the fonts specified in the CSS code below not appearing on screen?

I'm trying implement my code on an unlinked page in the Brine template.

I've inserted the CSS code via Design-->Custom Code. Only Freight Text is appearing, not the other fonts.

Project HTML

<div class="tt-canvas-inner-21813">
   <span class="tt-layer tt-21813-layer-1">LEGALITIES</span>
   <span class="tt-layer tt-21813-layer-2">This page was last updated in </span>
   <span class="tt-layer tt-21813-layer-3">JULY</span>
   <span class="tt-layer tt-21813-layer-4">2019</span>
</div>

Project CSS

div.tt-canvas-21813 { padding: 2em 0; margin: 0 auto; background-color: #fff;}

div.tt-canvas-inner-21813 { position: relative; margin: 0 auto; width: 811px; height: 192px;}

span.tt-layer { position: absolute; display: inline-block; white-space: normal; line-height: 1em; transform-origin: 50% 50%;}

span.tt-21813-layer-1 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #242424; font-family: freight-neo-pro; font-size: 3.6em; font-weight: 600; padding: 0em; white-space: nowrap; overflow: visible; top: 19px; left: 0; width: 282px; height: 57px; z-index: 1000;}

span.tt-21813-layer-2 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #@$@$@$; font-family: freight-text-pro; font-size: 1.8em; padding: 0em; white-space: nowrap; overflow: visible; top: 106px; left: 3px; width: 351px; height: 28px; z-index: 1000;}

span.tt-21813-layer-3 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #c1c1c1; font-family: freight-text-pro; font-size: 3em; font-weight: 500; letter-spacing: 0.05em; padding: 0em; white-space: nowrap; overflow: visible; top: 94px; left: 348px; width: 118px; height: 48px; z-index: 1000; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);}

span.tt-21813-layer-4 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #c1c1c1; font-family: freight-text-pro; font-size: 12em; font-weight: 500; letter-spacing: -0.025em; padding: 0em; white-space: nowrap; overflow: visible; top: 0; left: 462px; width: 349px; height: 192px; z-index: 1000; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg);}

Try add !important to after, eg. font-family: font name !important;If it still doesn't work, you should post site url to community check