how to specify which font to use in googlefonts with css

i have imported two fonts in my website Montserrat Extra-light 200 and Montserrat Medium 500 but when i type

font-family: 'Montserrat Extra-light 200', sans-serif;

it apllies the Montserrat Medium 500 font but i want to apply the Montserrat Extra-light 200 but there i an another text which shout use Montserrat Medium 500 so i cant remove one font

so is there any way which Montserrat to use in a specific text

here is my html and css code

#section1_text1 {
  font-family: "Montserrat", sans-serif;
}

#section1_text2 {
  font-family: "Montserrat", sans-serif;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/test/styles.css">
    <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=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <main>
        <div id="section1">
            <h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
            <h2 id="section1_text2">Agile Way Of Development</h2>
        </div>
    </main>
</body>

</html>

so i want to specify which font to use at a specifec text

Solution

Your HTML and CSS is correct. You only need to add the font-weight to make sure you can use specific font weight for your chosen font.

styles.css

#section1_text1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
}

#section1_text2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/test/styles.css">
    <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=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <main>
        <div id="section1">
            <h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
            <h2 id="section1_text2">Agile Way Of Development</h2>
        </div>
    </main>
</body>

</html>