Convert local font to Google Fonts CDN

Question

I have a bunch of Robot fonts on my website. I want to use Google fonts CDN instead of it just for performance issues. there is an issue that I have when I put google CDN url in url("@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap'") it doesn't work. For example, the CSS below uses local Robot fonts I should replace it with Google fonts CDN. What should I do to fix that?

 @font-face {
    font-family: roboto regular;
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Regular'), url(../webfonts/Roboto-Regular.woff) format('woff');
}
@font-face {
    font-family: roboto medium;
    font-display: auto;
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), url(../webfonts/Roboto-Medium.woff) format('woff');
}
@font-face {
    font-family: roboto bold;
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    src: local('Roboto Bold'), url(../webfonts/Roboto-Bold.woff) format('woff');
}
@font-face {
    font-family: roboto slab regular;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), url(../webfonts/RobotoSlab-Regular.woff) format('woff');
}

1. roboto regular 400
2. roboto medium 500
3. roboto bold 600
4. roboto slab regular 400

Answer 1

You can link it in your HTML like so:

<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=Roboto+Slab&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

or import it in your CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Roboto:wght@400;500;700&display=swap');

and then apply it to your css like so:

font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif;

Then you can delete your @font-face implementations.

source: https://fonts.google.com/share?selection.family=Roboto%20Slab%7CRoboto:wght@400;500;700