What makes two fonts work together
Good pairings have contrast with a reason. The classic move is a serif heading with a sans-serif body (or the reverse): the difference in structure makes the hierarchy obvious at a glance. Pairs also work when the fonts share an underlying skeleton — similar x-height and proportions — so they feel related even though they're different. What rarely works is two fonts that are almost the same: the difference reads as a mistake rather than a choice.
Limit a design to two families. Use weight (regular, medium, bold) and size to create more levels of hierarchy instead of adding a third font.
Choosing a body font
The body font does most of the work, because it's what people actually read. Choose one with a generous x-height, open letter shapes and clear distinction between similar characters like l, I and 1. Sans-serifs such as Inter, Roboto and Montserrat read well on screens at small sizes. Set body text at 16 px or larger on the web, with a line height of about 1.5–1.7.
Are these fonts free?
Yes. Every font here is from Google Fonts and released under the SIL Open Font License or Apache License, which allow free personal and commercial use — in print, on websites, in logos and in products. The copied CSS loads them from Google Fonts; you can also download them and host them yourself.