I am not sure this is the correct way, but i did it this way.
First step is to import the font in your app css.
You can either use a css
@import to a url of a css file containing the
@font-face rule, or download the files locally and create your own
I personally downloaded the font files of the font i wanted and i put them inside
src/fonts. Then i created a
@font-face rule in my app css.
Second step is to actually use the imported font. I just overwrote the CSS variable
--f7-font-family inside my css, like this:
--f7-font-family : 'Rubik', sans-serif;
This CSS rule works, but i’m not sure if it’s 100% correct. That’s why i created a topic about it in details here: http://forum.framework7.io/t/custom-font-css-variabile/7439.