Where to put fonts in yii2?

Question

I have a bootstrap 3 template and want to add its fonts (e.g. Icons.woff) to yii2, but I don’t know exactly how to implement them in the AppAsset class. Do we have $ font since we have $ css and $ js? What should I do?

Answer 1

You will need to do this manually.

Create a folder named 'fonts' in your web directory and place your font files there.

Go to the css directory and create a new fonts.css file there. Inside, you can declare your fonts using the @font-face rule as follows:

 @font-face { font-family: 'Font_Name_1'; src: url('../fonts/font1.ttf') format('truetype'); font-weight: normal; font-weight: normal; } @font-face { font-family: 'Font_Name_2'; src: url('../fonts/font2.ttf') format('truetype'); font-weight: normal; font-weight: normal; } 

To add this css file to your project, go to assets / AppAsset.php or the one you used to continue, if you have one, and add a new css file to the rest of the list:

 public $css = [ 'css/site.css', ..., 'css/fonts.css', ]; 

After that, you can use your fonts in your HTML using the CSS font family rule, something like this:

 body { font-family: 'Font_Name_1', serif; } 

NOTE. From personal experience it is very important to get format() right when declaring a font in the fonts.css file. truetype works for .tff files, eot works for .eot files, woff for .woff files, etc. Also, if you have multiple files for the same font, you should include all of them in your @font-face declaration to make sure that you have an option for each browser.