Set font for only one component in ionic react app, leave the rest to default

Ionic Framework Ionic React
1

We have an app that uses the default fonts of the platform it runs on (native android, iOS, different browsers).

We have one button from an external partner that has a specific font (Roboto). When I add the fonts locally in the src folder and add a fonts.css to define the fonts and set the style of the button, all components in my app are in Roboto (all texts, labels etc), which is is not what we want.

Is there a way to only change the font for only this button and leave it to default for all the other components?

App.tsx

import './theme/fonts.css';

fonts.css

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/RobotoSlab-Regular.ttf');
  }

buttons.css

.itsme-buttons-itsme-label {
    line-height: 24px;
    font-size: 18px !important;
    font-family: "Roboto" !important;
    font-weight: bold;
    text-transform: none;
    padding-top: 16px;
    padding-bottom: 16px;
    letter-spacing: 0px;
}

I only want this button in this font. Any help is appreciated!

2

Maybe the custom font family name ‘Roboto’ should be without ‘ ?

See example from W3schools

I assume the itsme…. class relates to the specific button?

Not sure why the font-face appies to everything else

3

I tried without the quotes. That seems to be the correct syntax, thanks for pointing that out. It does not change the behavior though…

The .itsme-buttons-itsme-label class is for one specific button in our app that opens a third party app to login.

The ion-font-family variable is changed.

getComputedStyle(document.documentElement)
    .getPropertyValue('--ion-font-family');

Gives as a result:
' "Roboto", "Helvetica Neue", sans-serif'

4

Just checked the source code

it states

html.ios {
  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
html.md {
  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
}

html {
  --ion-font-family: var(--ion-default-font);
}

So I guess I have to set the --ion-font-family explicitly without the Roboto font

I updated my variables.css like this:

  --ion-font-family: apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

This solves my issue

1 Like