A: Font Attributes
Make sure you have a license to use the specified font on the server.
If you do not have permission / license for the font, you should study it or a suitable alternative. Google Fonts and Font Squirrel are two great resources.
Check if an existing entry exists for the specified font on the CDN (e.g. Google Fonts )
If there is a shared CDN record, use this.
If a CDN is not available, create the necessary web fonts using the FontSquirrel Generator
This will give you a zip file with various font formats and an example CSS to use. From here you will want to place the mentioned fonts in your application.
B: Hosting at Node.JS
Assuming you're using ExpressJS, you'll want to use express.static middleware to serve a directory with static content (e.g. css, js, fonts)
eg:
// GET /static/javascripts/jquery.js // GET /static/style.css // GET /static/favicon.ico app.use('/static', express.static(__dirname + '/public'));
C: Other notes
It is important that the correct mime types for any font files you send are installed on your server. For example, WOFF is a relatively new format, and many settings do not have a mime type out of the box.
Recent versions of Firefox require the CORS header to be set if you are not using the same domain. Therefore, I would suggest adding Access-Control-Allow-Origin: * headers to all js, css, image and font files hosted in a separate domain (for future verification only)
There are several websites on the Internet to host types / fonts. Some of them have limited versions of commercial fonts or only fonts with a free / open license.
D: Font Family
The common mistake I see is that people will specify different font families for different versions of the same font, you only need to specify the weight / style accordingly.
@font-face { font-family: 'Open Sans'; src: url('OpenSans-Regular-webfont.eot'); src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Regular-webfont.woff') format('woff'), url('OpenSans-Regular-webfont.ttf') format('truetype'), url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('OpenSans-Italic-webfont.eot'); src: url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Italic-webfont.woff') format('woff'), url('OpenSans-Italic-webfont.ttf') format('truetype'), url('OpenSans-Italic-webfont.svg#open_sansitalic') format('svg'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: bold; font-style: italic; }
If this is the main font for your entire site, and there are other options, you can add them by indicating the appropriate weight / style, if necessary. As long as you have basic 4, you should be good for general use.
In addition, always indicate the appropriate fallback font.
html,body,div,span,a,li,td,th { font-family: 'Open Sans', sans-serif; }
TIP. If you use "Arial, Helvetica, ..." just use "sans-serif", and the most suitable platform font like Helvetica (Arial for Windows) should be the one to be used.