Fonts getting smaller when _theme.less is created

Question

I'm running 2.1.2 but since 2.0.1 I'm facing the same problem.

I have a custom theme and when I created file "_theme.less" under my template's structure (web/css/source) all those icons based on fonts get smaller. I mean Cart, Heart (wish list) and Bars (to compare). The weird thing is that the problem persist even if this _theme.less file is totally empty. When I remove the file everything went back to normal (without my customs, of course)

My custom template has Luma as parent so I tried copying all Luma's fonts to my own folder, also copied Blanks fonts but didnt work:

myuser@server: app/design/frontend/CustomTemplates/MyTemplate/web/fonts# ls
Blank-Theme-Icons.eot Blank-Theme-Icons.ttf Blank-Theme-Icons.woff2 Luma-Icons.svg Luma-Icons.woff selection.json Blank-Theme-Icons.svg Blank-Theme-Icons.woff Luma-Icons.eot Luma-Icons.ttf Luma-Icons.woff2

I'm flushing the cache before testing.

Any idea?
Thank you!

Answer 1

You should put your code in the file source/_extend.less. Putting it in _theme.less tells magento to overwrite the base theme file which is not what you want.

Answer 2

When you're extending a theme and overriding _theme.less you need to copy the variables from the original _theme.less.

This is something you can find in the css guide from Magento: https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-guide/css_quick_guide_approach.html