Integrating Font Squirrel generated font in Twitter Bootstrap via LESS

Question

I am attempting to use a font generated from Font Squirrel as the base font for Twitter Bootstrap (compiled from the LESS files). I am using Express.js with Node.js, and have included the font files within the font directory, i.e. ``` myapp |_ public |_ stylesheets |_ font ``` I have "installed" Font Awesome by changing the variables in `bootstrap.less` and have it working, so I know the directory structure is correct. With the custom font files in the `font` directory, where do I go next? Do I need to make a `my-custom-font.less` file that contains the `@font-face` declarations, or do I need to declare this within one of the bootstrap LESS files? I am aware that the base font is declared in `variables.less` via the `@baseFontFamily` attribute, but as I described I am not really sure how to declare this to be my custom font family. Thanks in advance. EDIT Below is the snippet of code I am attempting to use: ``` @ChatypePath: "font"; @font-face { font-family: 'chatypeb2.1regular'; src:…

Accepted Answer

I would try something like this in the `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` into a separate file and then using `@import`, but I don't think it's necessary. And then you can call the `@cusomFontFamily` and use it as `@baseFontFamily`, or wherever you want.

Integrating Font Squirrel generated font in Twitter Bootstrap via LESS

Solution

Problem