How to include a font inside my npm package

I'm trying to create my first npm package now. I'm using rollup and I test it inside another create-react-app using npm link.

I want to use a certain google font on my component's text, but it seems like importing it inside the package files isn't enough, and it only works when the font is imported in my testing app.

css in my npm package's styled component:

export const Text = styled.div`
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');

    display: flex;
    flex-direction: column;
    text-align: left;
    color: #0e1c48;
    overflow: hidden;
    font-family: 'DM Sans', 'Roboto', Tahoma, sans-serif;
`;

only works when I include these link tags in my testing app's index.html:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <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=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
    </head>
</html>

the package's rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';
import image from '@rollup/plugin-image';

const packageJson = require('./package.json');

export default [
    {
        input: "src/**",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: true,
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: true,
            },
        ],
        plugins: [
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            babel({ babelHelpers: 'bundled' }),
            image(),
        ],
        external: ['react', 'react-dom']
   }
];