Trouble with Google font

Hi,

My font code appears to have no effect on web browsers ( Chrome, Mozilla and IE). This does work when I run it on Codepen however. I was wondering if anyone had any suggestions. Thanks.

This is the code:

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie+edge">
<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=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet.css" href="style.css">

</head>
<body>
    <h1> test title</h1>
    <p>test123</p>
</body>
</html>

css:

body{
    font-family: 'Poppins', sans-serif;
}

It might be a plug-in issue on those browsers(?)

Check out the dev forum here. They might have an answer:
https://developers.google.com/fonts/docs/troubleshooting