External font in CartoCSS

Question

I want to use a non CartoDB-installed typeface (one from typography.com) for the place labels (closer than 14z) on the map at http://outgoingnyc.com. So far if I try to do it in the css, it fails (blank map).

Here's how I brought in the data:

 cartodb.createLayer(map, layerSource)
    .addTo(map)
    .done(function(layer) {
      layer.setInteraction(true);
      layer.on('error', function(err) {
          console.log('error: ' + err);
        });

    var subLayerOptions = {
      sql: "SELECT * FROM " + outgoingTable,
      cartocss: $("#markerStyle").text(),
      interactivity: 'year_opened, cartodb_id, name, year_opened, year_closed, audience, audience_2, audience, genre, genre2, source, pub_desc',
      infowindow: true
      } //end subLayerOptions

Here's the cartoCSS link (abbreviated):

<style type="cartocss/text" id="markerStyle">
  #outgoing_masterv2{
    marker-fill-opacity: 1;
    marker-line-color: #FFF;
    marker-line-width: 0;
    marker-line-opacity: 1;
    marker-placement: point;
    marker-type: ellipse;
    marker-allow-overlap: true;
    }
...
</style>

I'm guessing that the way I've done this makes me only able to access the CDB pre-installed type. Is there some way I don't know about to change this though?

The font-family is 'Ideal Sans A', 'Ideal Sans B'

font-family: 'Ideal Sans A', 'Ideal Sans B';

Answer 1

CartoDB renders text labels the same way and at the same point it renders your data into tiles, on the server with Mapnik.[1,2] This means you can only use CartoCSS to set only the set of server-installed fonts.

If you really, really want to use your own font, you either have to have access to your own CartoDB server [3] and install your font, or you need to style the label in the page's traditional HTML/CSS. There are a few ways you could go about doing the latter. Each might involve using the CartoDB SQL API [4] to get your features as GeoJSON rather than tiles.

1. Use L.DivIcon [5], and an interesting jsFiddle that shows how you might style with your page's CSS [5]

2. Use the Leaflet.label plugin [6] and also style through your page's CSS

Links (sorry most are broken, I need more reputation clearly!):

[1] http://mapnik.org/news/2011/09/02/text_formating/

[2] http://alastaira.wordpress.com/2011/07/18/rendering-text-labels-with-custom-fonts-in-mapnik/

[3] http://github.com/cartodb/cartodb

[4] http://docs.cartodb.com/cartodb-platform/sql-api.html

[4] http://leafletjs.com/reference.html#divicon

[5] http://jsfiddle.net/expedio/my565p1m/

[6] http://github.com/Leaflet/Leaflet.label

[7] How to add text-only labels on Leaflet map with no icon