Where do the pairings come from?

They are chosen and written down rather than computed. Pairings derived from font metrics, x-height and contrast and width, produce plausible combinations rather than good ones, because typography is not a distance function. Every suggestion here names why it works so you can disagree with it.

Are these fonts free to use?

Yes, all of them are open licence and available on Google Fonts, so you can use what the tool suggests in a commercial project without a licence to buy.

Does this load the fonts from Google?

No. The page shows the names and the CSS, and never fetches a font file or contacts Google. That means the samples render in fonts you already have, and it also means using this page tells Google nothing.

Font Pairing

Three body fonts per heading, each with a reason.

Heading font

Three body fonts per heading, each with a reason.

How to use it

Pick your heading font. Twelve to choose from, all open licence.
Read the three suggestions. Each says why it works, so you can judge it rather than take it on trust.
Copy the CSS. Font family lines for the heading and the first suggestion.

When you would use this

Font pairing advice is usually a wall of images with no reasoning attached, which is fine for browsing and useless when you are trying to decide. This gives three body fonts for each heading font and says why each one works. Sometimes the answer is that they share a designer or a family, sometimes that one has no personality and that is exactly what a heading with a lot of personality needs, and sometimes the right answer is the same font twice, separated by weight and size, which is what most well built interfaces actually do. The pairings are chosen rather than computed. Deriving them from metrics is the technically interesting approach and it produces combinations that are plausible rather than good, because how two faces read together is not a distance between two vectors. Every font here is open licence and on Google Fonts, so the suggestions are usable in real work. Nothing is loaded from Google: this page shows names and CSS and never fetches a font file, which means using it tells them nothing about what you are building.

Questions

Where do the pairings come from?: They are chosen and written down rather than computed. Pairings derived from font metrics, x-height and contrast and width, produce plausible combinations rather than good ones, because typography is not a distance function. Every suggestion here names why it works so you can disagree with it.
Are these fonts free to use?: Yes, all of them are open licence and available on Google Fonts, so you can use what the tool suggests in a commercial project without a licence to buy.
Does this load the fonts from Google?: No. The page shows the names and the CSS, and never fetches a font file or contacts Google. That means the samples render in fonts you already have, and it also means using this page tells Google nothing.