I am trying to add a font-family to my web page but for some reason its not working I added the font files into the resources (and set the targeted directory) added the font face to my style sheet like so 

@font-face {
    font-family: 'DIN Next LT Arabic';
    src: url('/fonts/DINNextLTArabic-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

and set it as a font in multiple places within the sheet 

html {
    color: var(--color-neutral-9);
    font-family: 'DIN Next LT Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    overflow: auto;
    overflow-x: hidden;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -servicestudio-overflow: initial;
}

but my web page still has the default font 

if anyone can help it would be greatly appreciated 

THANKS!