0

Recently I started using LESS to create common CSS for multiple projects. As it will be used in multiple projects, it is included to my current project as git submodule and all the contents are put in a folder. So the whole project file look like this:

myProject
    app
        //this is the code of my project
    public
        css
          //storing some third party CSS like font awesome
        fonts
          //font files of third part CSS
        myCSS
            less
              myStyle.less
            fonts
              myFont.ttf
  Some Other files and folders

And I am using laravel 4.2 as the framework. At first I started by using less.js to compile the LESS files on the run and everything works fine. The following is the LESS to include the fonts.

@font-face{
   font-family: OpenSans-Regular;
   src: url('../fonts/myFont.ttf'); 
}

However, I find that on some older machines and mobile devices, the processing speed is not fast enough that there will be a small instant that the elements are shown with no style. So, to solve the problem, I decided to compile the file on the server side with LESS PHP. The following is what I put at the top of the template file. (where every other pages will include the following lines)

<head>
<?php
require "lessc.inc.php";
$less = new lessc;
echo $less->compileFile("myStyle.less");
?>
//some other js and css to include
</head>
<body>
    //page contents
</body>

It compiles successfully, but as LESS is compiled to the page directly,when my page is having the url,

http://domain.com/public/myController/myPage/

It will search for the font file in

http://domain.com/public/fonts/myFont.tff

where it should be

http://domain.com/public/myCSS/fonts/myFont.tff

How can I compile the LESS file correctly with PHP? I don't want to change the path in LESS file or putting the LESS file outside the submodule folder (i.e. myCSS) as this style file will be reused in many other projects. I would like to compile on the run as the LESS file will still be rapidly changed during development.

cytsunny
  • 4,838
  • 15
  • 62
  • 129

1 Answers1

-1

Simply specify your font file from the root.

@font-face{
   font-family: OpenSans-Regular;
   src: url('/myCSS/fonts/myFont.ttf'); 
}
Deep
  • 1
  • 3
  • I know this solves the problem, but it just solves the problem for the current project. What if I want to reuse the same style in other projects and want to put them in a different position? – cytsunny Mar 31 '15 at 02:13
  • Sorry, not sure what you're getting at. – Deep Mar 31 '15 at 08:35