Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Integrating Font Squirrel generated font in Twitter Bootstrap via LESS

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: 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 erroneous here.

UPDATE:

Correct declaration:

@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;
}
like image 552
baskinomics Avatar asked Feb 16 '23 15:02

baskinomics


1 Answers

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.

like image 158
Martin Turjak Avatar answered Feb 26 '23 22:02

Martin Turjak