<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src:
local('Roboto'),
local('Roboto-Regular'),
url('https://fonts.gstatic.com/roboto/filename.ttf') format('truetype');
}
<link rel="stylesheet" href="/fonts/MyFonts.css">
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src:
local('Roboto'),
local('Roboto-Regular'),
url('/fonts/Roboto.woff2') format('woff2'),
url('/fonts/Roboto.woff') format('woff');
}
<link rel="preload" href="/fonts/Roboto.woff2" as="font" type="font/woff2"
crossorigin="anonymous">
<style>
@font-face {
...
src: url('/fonts/Roboto.woff2') format('truetype');
}
</style>
<script>
try {
for (font of document.fonts) {
font.family.includes('Roboto')) && font.load();
}
} catch (e) {}
</script>
Credit: Monica Dinculescu - Font-display playground
Credit: Monica Dinculescu - Font style matcher
DEMO