How do I install my own fonts on Nodejs Server?

Question

I am using Nodejs. All is good. My designer wants the webpages to use the 'Proximanova' font, which is a non-standard font. He has provided me the OTF files for the same font.

How do I go about using this custom font on the server?

I checked out a few node font packages, like FTPM and connect-font, but it wasn't clear if I could do this. FTPM depends on Google fonts, but I want to use my locally hosted fonts.

If this can't be done directly, what would you recommend?

Answer 1

A: Font Assets

Ensure that you have a license to use said font on the server.

If you don't have permission/license for the font, then you should look into it, or a suitable alternative. Google Fonts and Font Squirrel are two great resources

Check to see if there is an existing entry for said font on a CDN (Such as Google Fonts)

If there is a common CDN entry available, then use that.

If no CDN is available, generate the necessary web fonts via the FontSquirrel Generator

This will give you a zip file with the various font formats and a sample CSS to use. From here, you'll want to host said fonts in your application.

B: Hosting in Node.JS

Assuming you are using ExpressJS, you'll want to use the express.static middleware in order to serve up a directory with your static content (ex: css, js, fonts)

for example:

// GET /static/javascripts/jquery.js
// GET /static/style.css
// GET /static/favicon.ico
app.use('/static', express.static(__dirname + '/public'));

C: Other Notes

It's important that the proper mime-types are set on your server for any font files you are sending out. WOFF for example is a relatively new format, and many setups do not have the mime type out of the box.

The latest Firefox releases require a CORS header to be set if you aren't serving from the same domain. As such I'd suggest adding Access-Control-Allow-Origin: * headers to all js, css, image and font files hosted on a separate domain (just for future proofing)

There are several Type/Font hosting sites on the web that are available. Some have limited versions of commercial fonts, or only free/open-license fonts.

D: Font Families

A common mistake that I see is people will specify different font families for the different versions of the same font, you only need to specify the weight/style appropriately.

@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 primary font for your entire site, and there are other varieties, you may wish to add them specifying the appropriate weight/style if needed. As long as you have the main 4 covered, you should be good for general use.

Beyond this, always specify an appropriate fallback font.

html,body,div,span,a,li,td,th {
  font-family: 'Open Sans', sans-serif;
}

TIP: If you are using "Arial, Helvetica, ..." simply use "sans-serif" and the most appropriate platform font similar to Helvetica (Arial on Windows) should be the one that gets used.