How to install custom font in webpack template

1

Dear all,

I am playing around with the webpack template and getting my way around… I am new to webpack and I am still a little puzzeled how everything works… For instance… I would like to install a new font… how should I proceed with this?

Thanks for your help!

Greetz,

Peter

2

Hi,
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 @font-face rule.
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:

:root {
  --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.

2 Likes