[SOLVED] Custom font CSS variabile

Hello,
I am trying to use a custom font in my project (here’s the font).
I can override the --f7-font-family CSS variabile, and it works well.
Still my goal was to prepend my fonts to its value, so that it uses the “default” framework values as fallback if needed.
I couldn’t find a way to do it, even using less. Here’s what i tried:

:root {
  @my-font-family: 'Rubik', sans-serif;
  @f7-font-family: var(--f7-font-family);
  @font-family:  @my-font-family , @f7-font-family !important;
  --f7-font-family: @font-family;
}
:root {
  --f7-font-family: 'Rubik', sans-serif, var(--f7-font-family) !important;
}

Can someone help me out?
Thanks

1 Like

This is not possible, and this:

--f7-font-family: 'Rubik', sans-serif, var(--f7-font-family) !important;

won’t work as it is not valid statement. If you need custom font, just use it as:

--f7-font-family: 'Rubik';
1 Like

Hello,
thank you for your reply as always.
In the end i decided to just take the default values of the framework and prepended my fonts manually.
My goal was to do this dynamically to keep the css rules updated with the framework default values.

I’ll leave the code here for future reference.

:root.md {
  --f7-font-family : 'Rubik', Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
}
:root.ios {
  --f7-font-family : 'Rubik', -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
}
:root.aurora {
  --f7-font-family: 'Rubik', -apple-system, system-ui, Helvetica, Arial, sans-serif;
}

I’m marking the thread as solved.
Thanks again

2 Likes

Hi!! please where did you put this piece of code? I mean in what file pls?

Put this piece of code in app.css

As @shastox already replied, i put it in my app.css / app.less.

Ok thanks.

It worked.

I did this but when i compiled it to .apk it does not display the fonts in the app.