How to change font-family in Ionic

Ionic Framework Ionic React
3

I created an App.scss file and added the following

@font-face {
  font-family: "SegoeUI";
  font-style: normal;
  font-weight: normal;
  src: url("./fonts/Segoe\ UI.ttf");
}

@font-face {
  font-family: "SegoeUI-Bold";
  font-style: normal;
  font-weight: bold;
  src: url("./fonts/Segoe\ UI\ Bold.ttf");
}

@font-face {
  font-family: "SegoeUI-BoldItalic";
  font-style: italic;
  font-weight: bold;
  src: url("./fonts/Segoe\ UI\ Bold\ Italic.ttf");
}

@font-face {
  font-family: "SegoeUI-Italic";
  font-style: italic;
  font-weight: normal;
  src: url("./fonts/Segoe\ UI\ Italic.ttf");
}

* {
  font-family: "SegoeUI";
}

then is App.tsx

import './App.scss'

I have a font directory with the downloaded fonts, see project here: https://buff.ly/3oVZ9jU

1 Like