Use Poppins for headings and Rubik for body copy. Keep the hierarchy simple: a bold main message, quieter section headings and comfortable reading text.
Each example separates the text style from its guidance. Copy the CSS below it, then choose a font size that fits your layout.
Get the fonts
Section titled “Get the fonts”Load the fonts before using the CSS examples below. These stylesheet URLs include the weights used in this guide; add them through your site’s font-loading setup.
Poppins
Section titled “Poppins”https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,800&display=swaphttps://fonts.googleapis.com/css2?family=Rubik:wght@400&display=swapHeading
Section titled “Heading”Use a short, bold statement for the main message. Give uppercase text enough room to breathe.
Own the outcome
.chain-heading { font-family: Poppins, sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.07em; line-height: 1.125;}Section heading
Section titled “Section heading”Keep supporting headings lighter so readers can scan the page without every line competing for attention.
Find your next game
.chain-section-heading { font-family: Poppins, sans-serif; font-weight: 500; line-height: 1.3;}Body copy
Section titled “Body copy”Use regular-weight text and comfortable line spacing for explanations and longer reading.
Explore Chain games and find your next game.
.chain-body { font-family: Rubik, sans-serif; font-weight: 400; line-height: 1.7;}