Question: I have used css to link to font files in the conventional way, as seen here:

[How can I use Google's Roboto font on a website?](https://stackoverflow.com/questions/18178867/how-can-i-use-googles-roboto-font-on-a-website)

However there are a few instances where I may need more complicated style rules, and I use javascript in such cases. Strangely google searches only returned css font link methods, but I'm suspecting js has a way. I got as far as:

```
d3.select('body').append('text').text('my text')
    .attr('font-family', 'Roboto')
    .attr('src', 'url(my_url) format('truetype')');

```

However I'm not sure if it's supposed to look like that. Given that it's not working, my hunch is no. Any ideas?

Answer: 
As long as your referencing your google font in your document like the following:

```
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

```

All you have to do is specify the name when selecting `font-family` to apply it to any text element:

```
d3.select('body').append('text').text('my text')
    .style('font-family', "'Montserrat', sans-serif");

```

Fiddle - <https://jsfiddle.net/7jLgpx68/>

**#** For `.ttf` files, I would suggest setting it in css first like the following:

```
@font-face {
  font-family: "Super Sans";
  src: url(#url_to_ttf);
}

```

and then using it in your js code like 

```
d3.select('body').append('text').text('my text')
    .style('font-family', "Super Sans");

```
CSS is by far the easiest way to do this. You can always manipulate the tags containing text that you are working with different classes or id's using JS as you need.