2

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?

dk13
  • 1,461
  • 4
  • 20
  • 47
  • It looks like your fonts cannot be found locally. Sure `@font-face` can find them? Remove `src` from `dt-button..` classes, won't work anyway as it is a `@font-face` specific property. – Rene van der Lende Jul 17 '17 at 14:20
  • @RenevanderLende font-face can find them. I removed the the src but the buttons could not see the specific fonts. – dk13 Jul 17 '17 at 14:30
  • I'm not too familiar with @font-face but there is a difference between local and remote url(), so you might want to have a look at https://stackoverflow.com/questions/3698319/css-font-face-what-does-src-local-mean. – Rene van der Lende Jul 17 '17 at 14:33
  • This font is applied to another elements in your web page? – Majid Basirati Jul 18 '17 at 05:23
  • @MajidBasirati Yes these fonts are applied in several elements in my web page – dk13 Jul 18 '17 at 07:46

1 Answers1

1

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');
Spikolynn
  • 4,067
  • 2
  • 37
  • 44