Changing axis title font with CSS

plotly.js
1

I’m trying to use CSS to give the axis titles a custom font, but can’t find the right element to override. I’m fairly new to CSS and javascript.

@font-face {
  font-family: "Roboto";
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
}

.xaxis titlefont {
  font-family: "Roboto", Arial !important;
}

I don’t think .xaxis titlefont is right and have tried other variations. How can I find the correct name to access? Thanks in advance.

2

Why don’t you use the API for more robust results:

var layout = {
  titlefont: {
    family: 'Roboto'
  },
  xaxis: {
    titlefont: {
      family: 'Roboto'
    }
  }
}

Plotly.newPlot('graph', data, layout)

and then add

<link rel="stylesheet" type="text/css" href="<url to font style sheet>"

to your html page.

3

Hmm, I don’t have access to the html so I am trying to use CSS. Is it still possible?