Typography plays a crucial role in web design, influencing the overall look and feel of a website. Google Fonts provides a diverse collection of typefaces that are not only visually appealing but also optimized for web performance. In this post, we’ll explore the latest Google Fonts that can elevate the typography of your website.
1 – DM Sans
Include font into head
<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=DM+Sans:wght@100..900&family=Rethink+Sans:wght@400;800&display=swap" rel="stylesheet">
Add css
font-family:"DM Sans",sans-serif;
2 – Rethnic Sans
Include fonts into head
<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=Rethink+Sans:wght@400..800&display=swap" rel="stylesheet">
Add css
font-family: 'Rethink Sans', sans-serif;
3 – Onest
Include fonts into head
<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=Onest:wght@100..900&display=swap" rel="stylesheet">
Add css
font-family: 'Onest', sans-serif;
4 – Schibsted Grotesk
Include fonts into head
<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=Schibsted+Grotesk:wght@400..900&display=swap" rel="stylesheet">
Add css
font-family: 'Schibsted Grotesk', sans-serif;
Explore the latest google fonts here for more details