<html>
<head>
<style>
@font-face {
font-family: fontface;
src: local('Times New Roman'), local('Tinos-Regular');
}
.local {
font-family: 'Times New Roman', 'Tinos';
}
.face {
font-family: fontface;
}
.bold {
font-weight: 700;
font-size: 20px;
}
.italic {
font-style: italic;
font-size: 20px;
}
</style>
</head>
<body>
<p>The following two lines should look differently. The first line is synthetic bold of normal face, the second line is bold face.</p>
<div class="face bold"><span>The quick brown fox jumps over the lazy dog</span></div>
<div class="local bold"><span>The quick brown fox jumps over the lazy dog</span></div>
<p>The following two lines should look differently. The first line is synthetic italic of normal face, the second line is italic face.</p>
<div class="face italic"><span>The quick brown fox jumps over the lazy dog</span></div>
<div class="local italic"><span>The quick brown fox jumps over the lazy dog</span></div>
<script src="resources/wait_for_async_local_fonts.js"></script>
</body>
</html>