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;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With