using @font-face in Microsoft Edge

Question

I am dealing with a strange issue here.. It seems that Microsoft Edge browser doesn\'t load fonts when I use @font-face. I checked all my computers that run Windows 10 &

Answer 1

Procedure:

The procedure I followed in order to install all necessary formats was to find which font-weight I needed from each font and then go and download it from Google Fonts. Then using the https://everythingfonts.com/font-face (font face generator) I downloaded all the formats along with the CSS code. Then I incorporated them all into my CSS and HTML.

CSS:

@font-face {
    font-family: 'JosefinSansLight';
    src: url('/fonts/JosefinSansLight.eot');
    src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'),
         url('/fonts/JosefinSansLight.woff2') format('woff2'),
         url('/fonts/JosefinSansLight.woff') format('woff'),
         url('/fonts/JosefinSansLight.ttf') format('truetype');
}

HTML (excerpt):

.testim{
font-family:'JosefinSansLight', sans-serif;
line-height:normal;
color:#969696;
font-size:1.2em;
}

Files: (my domain folder)/fonts

fonts/JosefinSansLight.eot
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.woff2
fonts/JosefinSansLight.woff
fonts/JosefinSansLight.ttf