Is there any possibility of using imported fonts with r2d3?

Question

I make d3 plots with r2d3 library in R and try to change the font. Unfortunately it is always Arial that renders at the end. Is there any proven way to make it work?

I have tried this in css file connected to js file:

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');
text {
    font-family: "Fira Sans", sans-serif;
    fill: #371ea3;
    color: #371ea3;
}

Adding !important does not help.

Font-family changes to "Fira Sans" properly, but in Computed section i can see that rendered font is Arial.

Answer 1

You can use a css file with:

r2d3(data, script = "script.js", css = "styles.css")

As noted in the documentation here. I took your css and placed it in a file without issue for text drawn within an svg.

With that I successful with the following (adapting the basic example from the documentation):

chart.r:

library(r2d3)
data <- c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
r2d3(data, script = "chart.js", css="styles.css")

styles.css:

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');
text {
    font-family: "Fira Sans", sans-serif;
    fill: #371ea3; /* no need for 'color' */
}

and chart.js:

var barHeight = Math.floor(height / data.length);
svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue');

svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .attr('x',20)
  .attr('y', function(d,i) { return i * barHeight + 30})
  .text(function(d){ return d; })

Giving:

---

I also had success with a reduced css file specifying only the font:

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');

And then using selection.style/attr to style the text:

 selection.attr('font-family', "FontFamilyName"); // or:
 selection.style('font-family', "FontFamiliyName");

And here's what that approach looked like (again adapting the basic example from the docs)

chart.r:

library(r2d3)
data <- c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
r2d3(data, script = "chart.js", css="styles.css")

styles.css:

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');

And chart.js (based on the basic introductory example on the api docs):

var barHeight = Math.floor(height / data.length);
svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue');

svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .attr('x',20)
  .attr('y', function(d,i) { return i * barHeight + 10})
  .text(function(d){ return d; })
  .style('font-family',function(d,i) {
      if(i%2 == 1) return 'Fira Sans'; else return ''; // for contrast.
   });  

Yielding (alternating between default font and Fira Sans for contrast):