how to add standard google fonts to D3.js svg text element

Question

How do I add google fonts to d3 text element, for example:

   g.append('text')
      .attr('x', width / 2)
      .attr('y', height / 3)
      .text('roboto')
      .style("font-family", "roboto")
      .style("font-size", "80px")
      .attr("fill", "grey");

This is separate to the below question which focuses on custom type face

Using google fonts with d3.js and SVG

Answer 1

The straight forward solution:

Use the link element, as shown below, in your layout's head

 <link href='https://fonts.googleapis.com/css?family=Inconsolata:700' rel='stylesheet' type='text/css'>

This imports the font in question, and then within your svg element add the font family:

 svg.append('text')
      .text('Inconsolata')
      .style("font-family", "Inconsolata")