Go to
Pick the one to use. Make sure the View Selected Families is visible (top right).
Copy the code into the <head> of the HTML. Past it at the end, just above </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=Playfair+Display&display=swap" rel="stylesheet">
Then copy CSS rules to specify families in your CSS file, for example:
font-family: 'Playfair Display', serif;
I replaced it here in this example of the site I was changing:
body {
background: #fff;
font-family: 'Playfair Display', serif;
/* font-family: 'Source Sans Pro', sans-serif; */
font-size: 19pt;
font-weight: 300;
line-height: 1.75em;
color: #888;
}
And then of course Save both files.
Use this for future reference.