如何在 Safari 中加载带有 CSS 的自定义字体？

Question

I am creating a simple web page and I am applying a custom font (Roboto). I have declared them in the CSS file but Chrome detects it fine and Safari does not.

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

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

h1.site-title,
h2.subtitles {
    font-family: 'Roboto' !important;
    font-weight: bold;
}

h4.subtitles {
    font-family: 'Roboto' !important;
    font-weight: bold;
}

p {
    font-family: 'Roboto' !important;
    font-weight: normal;
    color: rgb(90, 90, 90);
}

I checked with the Safari console to see if it was getting the fonts, and it does, but when I look at the files one by one, they don't match the original font.

Answer 1

Finally, thanks to some comments and such, I got it to work using another download link:

https://fonts.googleapis.com/css?family=Roboto

From here Google offers different components to add to the CSS of your project, what I did was, just in case in the future that typography was no longer available in that link and I lost it, I downloaded it from the link that appears and I put it locally in my project and linked it with the relative path.

I have no idea if it was because the files I downloaded didn't work or any other reason, but the fact is that from this link and using only the one in woff2 format, it works both in Chrome and Safari.

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/roboto/roboto.woff2) format('woff2');
}

I hope this may be of help to someone in the future. Many thanks to all of you who have responded.