Google font not rendering in SVG React

Question

I created the logo of my system in SVG by Illustrator, the logo has 2 fonts google fonts, but to be rendered depends on having the source installed in the OS. I did a lot of research to try to solve this, tried all the stack solutions, npm packages, and nothing... One of the solutions I tried was to use @font-face and @import url() within the svg style, but it didn’t help. I tried nano but it only rendered a source and to get complete just by paying...

I’m creating the svg with the img tag with Styled Components, follow the code, it’s working normally for any svg (except for this font problem):

mport React from 'react';

import { ThemeColors } from '../../dataTypes/enums';
import { Svg } from './styles';

export enum IconSizes {
  small = '2rem',
  medium = '3rem',
  big = '2rem',
  logo = '18rem',
}

interface IIconProps {
  src: string;
  size?: IconSizes;
  color?: ThemeColors;
  alt?: string;
}

export function Icon({ src, size, color, alt }: IIconProps) {
  return (
    <Svg
      src={src}
      size={size ?? IconSizes.medium}
      color={color ?? ThemeColors.black}
      alt={alt}
    />
  );
}

import styled from 'styled-components';
import { ThemeColors } from '../../dataTypes/enums';

interface ISvgProps {
  size?: string;
  color?: ThemeColors;
}

export const Svg = styled.img<ISvgProps>`
  width: ${({ size }) => size ?? '0'};
  height: auto;
`;