Greg Gum Greg Gum - 3 months ago 20
Less Question

How to specify path to fonts when compiling less

My first day with less compilation in Visual Studio 2015.

I have a folder with all of the less files for the project call

css-src


I then have a compiler option that says to put the output files in wwwroot/css.

This does put the compiled files in the expected location.

However, the path to the font's is not being correctly compiled.

For example, in less:

@font-face {
font-family: 'Proxima Nova';
src: url('../fonts/Proxima_Nova_Semibold.eot');
src: url('../fonts/Proxima_Nova_Semibold.eot') format('embedded-opentype'),
url('../fonts/Proxima_Nova_Semibold.woff2') format('woff2'),
url('../fonts/Proxima_Nova_Semibold.woff') format('woff'),
url('../fonts/Proxima_Nova_Semibold.ttf') format('truetype'),
url('../fonts/Proxima_Nova_Semibold.svg#Proxima_Nova_Semibold') format('svg');
font-style: normal;
font-weight: 600;


}

In compiled file:

@font-face {
font-family: 'Proxima Nova';
src: url('../../css-src/fonts/Proxima_Nova_Semibold.eot');
src: url('../../css-src/fonts/Proxima_Nova_Semibold.eot') format('embedded- opentype'), url('../../css-src/fonts/Proxima_Nova_Semibold.woff2') format('woff2'), url('../../css-src/fonts/Proxima_Nova_Semibold.woff') format('woff'), url('../../css-src/fonts/Proxima_Nova_Semibold.ttf') format('truetype'), url('../../css- src/fonts/Proxima_Nova_Semibold.svg#Proxima_Nova_Semibold') format('svg');
font-style: normal;
font-weight: 600;
}


The compiled path is incorrect. It should be
fonts/Proxima_Nova_Semibold.eot


How should I be configuring this?

Answer

Declare a variable:

@path-fonts: "/fonts";

Then use it. Note the braces around the variable name:

@font-face {
  font-family: 'Proxima Nova';
  src: url('@{path-fonts}/Proxima_Nova_Semibold.eot');
  src: url('@{path-fonts}/Proxima_Nova_Semibold.eot') format('embedded-opentype'),
  url('@{path-fonts}/Proxima_Nova_Semibold.woff2') format('woff2'),
  url('@{path-fonts}/Proxima_Nova_Semibold.woff') format('woff'),
  url('@{path-fonts}/Proxima_Nova_Semibold.ttf') format('truetype'),
  url('@{path-fonts}/Proxima_Nova_Semibold.svg#Proxima_Nova_Semibold') format('svg');
  font-style: normal;
  font-weight: 600;
}
Comments