I am using a font from google fonts and for some reason its coming out blurry compared to a default font. I am not sure if it is just my computer. Is there any way I can fix the blurriness?
h1 {
font-family: 'Zilla Slab', serif;
font-size: 88px;
line-height: 90px;
color: #262421;
}
.joe {
font-family: serif;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arimo&family=Zilla+Slab:wght@500&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<h1 class="joe">Hello</h1>
</body>
I tried using a font from Google Fonts, but it is coming out blurry. I expected it to come out at a good resolution.
2
Answers
You can try with CSS
text-shadow
property like this:I carried out tests and comparisons between the font used in the HTML page and the rendering of Google Fonts. I also installed the font locally for further comparison. The font always shows a slight blurring in all cases.
Tests carried out on MacOS using Firefox, Safari and Chrome.