Styjun

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.

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):