Css 从Google字体导入字体并将其添加到CreateGlobalStyle无法正常工作

我正在从谷歌字体导入Roboto，有4种不同的权重，但是我不知道我是否做得正确，因为我缺少字体权重

尝试使用时：

字体大小：400

或

font-weight:500

没有明显的区别

以下是我导入字体的方式：

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

    body{
        font-family:'Roboto', sans-serif;
        margin: 0;
        padding: 0;
    }
`

样式化组件的实现：

const ProductTitle = Styled.div`
    font-weight: 500;
    color: #737B81;
    line-height: 20px;
`

我正在使用样式化组件的
createGlobalStyle
将其拉入不同的React组件中
尝试以下方法：

import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
  body {
    font-family: 'Roboto', sans-serif;
  }
`

因此，不同之处在于首先导入然后使用，如果不起作用，则导入字体，然后使用css更改权重。
尝试以下方法：

import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
  body {
    font-family: 'Roboto', sans-serif;
  }
`

所以不同的是先导入然后使用，如果不起作用，只导入字体然后用css更改权重。
我现在尝试了这个，但没有成功，我也只是更新了我的问题。谢谢你的回答。我现在尝试了这个，但运气不好。我也刚刚更新了我的问题。谢谢你的回复