CODEWITHSUNDEEP
cssdatatableswebfonts
dk13
dk13

Reputation: 1501

How to change the font family of jquery datatables export buttons

I have used the datatables export buttons (https://datatables.net/extensions/buttons/examples/html5/simple.html) on my web site.
However in my web site I'm using custom font-family. In my main css the code is the following: 

@font-face {
    font-family: MyFontCapital;
    src: url('../font/MyFontCapital.otf'); 
}
@font-face {
    font-family: MyFontSansRegular;
    src: url('../font/MyFontSans-Regular.otf'); 
}
@font-face {
    font-family: MyFontSansMedium;
    src: url('../font/ MyFontSans-Medium.otf'); 
}

And the css files I use are the following:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="css/plugins/dataTables/buttons.dataTables.min.css" rel="stylesheet">

While the additional js files are the following: 

<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/plugins/dataTables/dataTables.buttons.min.js"></script>
<script src="js/plugins/dataTables/buttons.flash.min.js"></script>
<script src="js/plugins/dataTables/jszip.min.js"></script>
<script src="js/plugins/dataTables/pdfmake.min.js"></script>
<script src="js/plugins/dataTables/vfs_fonts.js"></script>
<script src="js/plugins/dataTables/buttons.html5.min.js"></script>
<script src="js/plugins/dataTables/buttons.print.min.js"></script>

I'd like to change the fonts that the export button use (CSV , Excel, PDF, Print)

I tried to add the on my main css the code: 

.dt-button {
  font-family: MyFontCapital;
  src: url('../font/MyFontCapital.otf');
}

or 

.dt-button-collection{
  font-family: MyFontCapital;
  src: url('../font/MyFontCapital.otf');
}

But didn't work. I also searched the datatables site but didn't find any example that font-family is set during datatable initialization. Any idea what I should do?

Upvotes: 2

Views: 2431

Answers (1)

Spikolynn
Spikolynn

Reputation: 4173

Make your style definitions more important e.g.

.dt-button {
  font-family: MyFontCapital !important;
}

The src in .dt-button styling is not needed.

Also, you have an extra space in path to font:

    font-family: MyFontSansMedium;
    src: url('../font/ MyFontSans-Medium.otf');

Upvotes: 1

Related Questions