I don't know why, when I use f/example Bifur by "Tee-Wat" on my own code, the font doesn't show right, in this case the fine lines seems like they fuse (Happens in Opera, Mozilla, Chrome and Edge). I've tried changing the font-size. Using a webkit made from FontSquirrel, and the font seem to works fine in the webkit demo file, tried to copy the font related tags and css, but got no results.
Something similar happens with other fonts, like Extenda.
Here are some screenshots of the problem. Bifur not showing right. The webkit demo shows it right.
@font-face {
font-family: 'bifurregular';
src: url('bifur___-webfont.woff2') format('woff2'),
url('bifur___-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.his{
font-family: 'bifurregular';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIPOS Inicio</title>
<link rel="icon" type="image/x-icon" href="img/t.png">
<link rel="stylesheet" href="fonts.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h2 class="his">Historia</h2>
</body>
</html>
it won't be the perfect solution but try moving the font-weight property in your .his css rule below 600... something like font-weight: 500; for example should return a better result- answered by @diegod