Magento2 : How to override less variable value

Question

How to override default blank theme less variable value? Generally veriable are declare in lib\web\css\source\lib\variables directory.
i.e from file
lib\web\css\source\lib\variables_typography.less

@font-family__sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family__serif: Georgia, 'Times New Roman', Times, serif;
@font-family__monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;

@font-family__base: @font-family__sans-serif;

I want to change value of above attribute.

• From where can I override these varable?
• How can I change font-family in body?

Answer 1

You can override default less variables in your custom theme. In <magento-root>/lib/web/css/source/lib/variables/ you will find a number of LESS files.

In each of these you can find values assigned to variables for many of the common elements in Magento 2.

To override any of these variables, simply create a less file in your custom theme and update the variable like below.

app/design/frontend/{Namespace}/{theme}/web/css/source/_theme.less

//  Font families
@font-family__sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family__serif: Georgia, 'Times New Roman', Times, serif;
@font-family__monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;

Kindly refer to below links for more detail.

https://magento.stackexchange.com/a/110165/23943 https://magento.stackexchange.com/a/109808/23943