Integration of Font Squirrel generated font in Twitter Bootstrap via LESS

Question

I am trying to use a font created from Font Squirrel as the base font for Twitter Bootstrap (compiled from LESS files). I am using Express.js with Node.js and have included font files in the font directory, i.e.

myapp |_ public |_ stylesheets |_ font 

I have an “installed” Awesome font, changing the variables in bootstrap.less and working, so I know that the directory structure is correct. With custom font files in the font directory, where do I go next? Do I need to create a my-custom-font.less containing @font-face declarations, or do I need to declare this in one of the bootstrap LESS files? I know that the base font is declared in variables.less using the @baseFontFamily attribute, but as I said, I'm not quite sure how to declare it with my own font family. Thanks in advance.

EDIT

The following is a snippet of the code I'm trying to use:

 @ChatypePath: "font"; @font-face { font-family: 'chatypeb2.1regular'; src: url('@{ChatypePathPath}/chatypeb2.1regular-webfont.eot?v=3.0.1'); src: url('@{ChatypePathPath}/chatypeb2.1regular-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('@{ChatypePathPath}/chatypeb2.1regular-webfont.woff?v=3.0.1') format('woff'), url('@{ChatypePathPath}/chatypeb2.1regular-webfont.ttf?v=3.0.1') format('truetype'); } 

NOTE. There is something wrong here.

UPDATE:

Correct announcement:

 @chatypeFontFamily: "ChatypeB2.1ThinThin", "Courier New", monospace; @font-face { font-family: 'ChatypeB2.1ThinThin'; src: url('font/chatypeb2.1thin-webfont.eot'); src: url('font/chatypeb2.1thin-webfont.eot?#iefix') format('embedded-opentype'), url('font/chatypeb2.1thin-webfont.woff') format('woff'), url('font/chatypeb2.1thin-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

Answer 1

I would try something like this in variables.less :

 @customFontFamily: "Custom", "Courier New", monospace; /* here you should use whatever @font-face squirrel generated in the stylesheet.css */ @font-face { font-family: 'Custom'; font-style: normal; font-weight: 400; src: local('Custom'), local('Custom-Regular'), url(path.to.font.file.woff) format('woff'); } 

you can also put the font-face in a separate file and then using @import , but I don't think it is necessary. And then you can call @cusomFontFamily and use it like @baseFontFamily or wherever you want.