data-application font of an external script only used for the first display

data-application font of an external script only used for the first display

Sorry for my English

I test on MacOs 10.13.6 and Safari 12.0.3
I write a multipage web app with only one query mobile file : main.html
All the js and css files are in the head (see below).
2 pages are dynamically updated with :

$(document).on('pageshow','[data-role="page"]',function(event){
  switch(event.target.id){
    case 'dictee' :
      ...
      $(document).ready(function(){
        call to abc2svg-1; // external script
      });
      ...
      break;
    case 'correction':
      ...
      $(document).ready(function(){
        call to abc2svg-1; // external script
      });
      ...
      break;
    default :
      ...
  }
});

abc2svg is an external script which convert music in abc format to an svg image with class "music" using a data-application / font.
When the pages are first displayed everything is OK : .music{font: 24px music; fill:currentColor} is used
For the next displays there is a problem of font. The class of the svg is still music, the data-application font is still in the ressources but .music{font: 24px music; fill:currentColor} is not present and body {... font-family : sans-serif ...} is used.

I know that "$(document).ready(function(){" is normally not used in jQuery mobile but if I don't write it, the script abc2svg-1.js seems not loaded when the pageshow event is fired.

  <head>
    <title>Ear Training</title>
    ...
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="jquery-mobile-theme/themes/myTheme.css" />
    <link rel="stylesheet" href="jquery-mobile-theme/themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="jquery.mobile.structure-1.4.5.css">
    <link rel="stylesheet" href="myStyles.css">
    <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="myMobileinit.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <link href="abc2svg_style.css" media="all" rel="stylesheet" type="text/css" />
    <script src="abc2svg-1.js"></script>
    ... my scripts ...
  </head>