...
Download your font files and place them under
your-project/themes/custom/simplytheme/src/fonts/fonts-name
Preferably TTF/OTF, WOFF, WOFF2 formats for better browser compatibility. SVG and EOT font files are not supported by most browsers. To know more details about the font formats: https://www.w3schools.com/css/css3_fonts.aspIn your font files, there will be a css file generated by the font that have font-face setting, in there you can setup the font-weight range, font-family name, etc. There’s one thing needs to be noticed, if the text jumps while loading the custom font, add property font-display: fallback would normally fix the issue. For more details, please check out this article https://web.dev/optimize-webfont-loading/ .
Include the css file in your-project/themes/custom/simplytheme/simplytheme.libraries.yml under fonts: css: theme: like this src/fonts/your-fonts-name/font.css
If it’s a variable font, please check this doc for more details: Variable Fonts
From there you can setup font family and all the other properties in
your-project/themes/custom/simplytheme/src/sass/settings/typography.scss
Based on design.
...