Local Google Font in Angular

Google Webfonts Helper

assets/fonts/inter/…

scss/base/_typography.scss

@use 'shared' as *;

* {
  font-family: var(--font-family);
}

scss/base/_fonts.scss

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('../../assets/fonts/inter/Inter-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('../../assets/fonts/inter/Inter-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../../assets/fonts/inter/Inter-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../../assets/fonts/inter/Inter-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../../assets/fonts/inter/Inter-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../../assets/fonts/inter/Inter-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../../assets/fonts/inter/Inter-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../../assets/fonts/inter/Inter-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../../assets/fonts/inter/Inter-Black.ttf') format('truetype');
}

scss/abstracts/_var-exports.scss

$font-family: 'Inter', sans-serif;@use './variables' as var;

scss/abstracts/_variables.scss

@use './variables' as var;

@mixin export-vars() {
  --font-family: #{var.$font-family};
}