CLIR + DLF Fonts

Fonts for use in CLIR + DLF sites.

You can check out the specifimen sheets for

• CLIR Replacement Web Font
• Logo Fonts

Fonts Available

• A028 (font weights: 500 and 800)
• clir-logo
• dlf-logo
• ndsa-logo

The Easy Way

Link to the stylesheet:

HTML (Jekyll)

<link rel="stylesheet" href="https://clirdlf.github.io/logo-fonts/style.min.css">
<link rel="stylesheet" href="https://clirdlf.github.io/logo-fonts/clir-font/stylesheet.min.css">

Rails

<%= stylesheet_link_tag 'https://clirdlf.github.io/logo-fonts/style.min.css' %>
<%= stylesheet_link_tag 'https://clirdlf.github.io/logo-fonts/clir-font/stylesheet.min.css' %>

WordPress

wp_enqueue_style( 'clir-logo-fonts', 'https://rawgit.com/clirdlf/logo-fonts/master/style.min.css');
wp_enqueue_style( 'clir-fonts', 'https://rawgit.com/clirdlf/logo-fonts/master/clir-font/stylesheet.min.css');

Elementor Normal: https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Ext.woff https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Ext.woff2 https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Ext.ttf https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Ext.svg https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Ext.eot

Medium: https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Med.woff https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Med.woff2 https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Med.ttf https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Med.svg https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/A028-Med.eot

CSS/SCSS

@import 'https://clirdlf.github.io/logo-fonts/style.min.css';
@import 'https://clirdlf.github.io/logo-fonts/clir-font/stylesheet.min.css';

Production CDN*

You can use RawGit CDN to go through MaxCDN for this:

• https://cdn.rawgit.com/clirdlf/logo-fonts/master/style.min.css
• https://cdn.rawgit.com/clirdlf/logo-fonts/master/clir-font/stylesheet.min.css

The Hard Way

I don't know, submodule this or something. Don't do it; it'll break unexpectedly.

Usage

This is a self-contained snippet that can be used as a SCSS partial in your project

$clir-burgundy: #560319;
$dlf-blue:      #046BA5;
$ndsa-blue:     #0165AE;
$hc-blue:       darken($dlf-blue, 15%);

@import 'https://fonts.googleapis.com/css?family=Crimson+Text|Open+Sans';
@import 'https://clirdlf.github.io/logo-fonts/style.min.css';
@import 'https://clirdlf.github.io/logo-fonts/clir-font/stylesheet.min.css';

.clir-color { color: $clir-burgundy; }
.clir-font  { font-family: 'A028', serif; }

.dlf-font   { font-family: 'Crimson Text', serif; }
.dlf-color  { color: $dlf-blue; }

.ndsa-font  { font-family: 'Open Sans', sans-serif; }
.ndsa-color { color: $ndsa-blue; }

.hidden-collections-color { color: $hc-blue; }
.hidden-collections-font  {font-family: 'A028', serif; }


.logo {
  font-size: 22px;
  letter-spacing: 1px;
  margin-bottom: 0;
}

In the HTML

<p class="logo">
  <i class="icon-clir-logo clir-color"></i> <span class="clir-font">CLIR</span>
</p>

<p class="logo">
  <i class="icon-clir-logo-square clir-color"></i> <span class="clir-font">CLIR</span>
</p>

<p class="logo">
  <i class="icon-dlf-logo dlf-color"></i> <span class="dlf-font">DLF</span>
</p>

<p class="logo">
  <i class="icon-ndsa-logo ndsa-color"></i> <span class="ndsa-font">DLF</span>
</p>

<p class="logo">
  <i class="icon-clir-logo hidden-collections-color"></i> <span class="clir-font">CLIR</span>
</p>

Updating

• Log on to the icomoon app and edit the CLIR+DLF Logos.
• After you get everything set up, click on the Generate Font menu (at the bottom) and then download the font.
• Unzip the package and replace the files in this repository.
• Be sure to run gulp to generate a new minified css file in dist.
• Right now, just rename this file (mv dist/style.css style.css.min)

Note on fonts

CLIR's logo is a variant of Albertus and DLF's is a variant of Trajan.

Albertus is a Monotype Foundry font (from the 1930s) and I've not yet found a good (free) webfont replacement. Similar fonts include Lydian and Friz Quadrata. In type, this pairs well with Goudy Old Style, but Sorts Mill Goudy is a good replacement.

So I'm keeping the above here, but I found that (UFW)++ Design and Development created a look-alike font called A028 and released it under an AFPL license license. I generated web fonts from the TTF I found and updated this document with the links to these fonts.

Trajan is an Adobe Foundry font, but Crimson Text works well enough. Good pairings with this font are Open Sans, Lato, Raleway, Montserrat, and Roboto.

We couldn't figure out the original font used for the NDSA logo so we just used Open Sans.

Generating Webfont for A028

Seriously, don't even try this if you're not on OS X...

Turns out there was a very similiar font to Albertus created for Linux called A028 with an AFPL license (by (URW)++ Design & Development). I grabbed the TTF from this repo (which has some other great fonts).

https://github.com/greyscalepress/font-specimens

Specifically font-speciments/fonts/encore_des_fontes_manu/A028

I converted these to web fonts with FontForge. The filesize isn't huge, and I'm shying away form creating a variant of the font that only has the 4 letters we need, but it's definately something we could do (but probably premature optimization).

$ brew install ttf2eot ttfautohint fontforge --with-python
$ npm install
$ ./convert2svgfont.pe path/to/font.ttf