Multple Google Fonts in html doc

I want to apply a google font to only specific css selectors or elements in my page.

I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.

If possible id prefer not to have an external stylesheet.

Is this possible? I dont mind doing in a script tag if i have to.

Solution

Here you have a example and I've put the style in the html so you dont need a external stylesheet although I wouldn't recommend it

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Rowdies&display=swap" rel="stylesheet">
<style>
  h2,
  h3,
  span {
    font-family: 'Roboto', sans-serif;
  }
  
  h2 {
    font-weight: 500;
  }
  
  h3 {
    font-weight: 700;
  }
  
  h1,
  p {
    font-family: 'Rowdies', cursive;
  }
</style>
<h1>h1 Rowdies</h1>
<h2>h2 Roboto font-weight 500</h2>
<h3>h3 Roboto font-weight 700</h3>
<p>p Rowdies</p>
<span>span Roboto</span>

I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.

Not a 100% sure if its possible or not but I see no reason why you can't just use the font-weight property