How to change font-family in Ionic

Ionic Framework Ionic React
1

I am new to Ionic and i already start to hate it… I mean, everytime i try to change something, like a little bit of custom color or just a little bit of custom font-family i have to search the whole internet and still not find anything. I tried everything, always the same result, no custom font displayed. Wherever i put “font-family” it always says “Insert generic font name”… guys please… just tell me why and what should I do? I am literally very very frustrated now.

Thank you.

1 Like
2

I usually do this with ionic/angular.

Put this @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); at the top of your variables.scss file. Then you can now use it anywhere like this:

h4 {
font-family: 'Source Sans Pro', sans-serif !important;
}

I hope this helps.

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
4

Thank you very much for your answer Sir. It worked using a scss file. I want to say that I appreaciate your tutorials and projects, truly quality work. Thank you very much for the support you offer online.
God bless you.