Web objects and web fonts..

We are going to use Bryant2 and the licence includes some web fonts. I have not used these before. From the research I did, the best I could come up with is:

@font-face {
  font-family: MyBryantB;
  src: local("Bryant Bold"),
  local("Bryant Bold"),
  url(BryantWebBold.eot),
  url(BryantWebBold.woff),
  url(Bryant-Bold.otf);
  
}

@font-face {
  font-family: MyBryantM;
  src: local("Bryant Medium"),
  local("Bryant Medium"),
  url(BryantWebMedium.eot),
  url(BryantWebMedium.woff),
  url(Bryant-Medium.otf);
  
}


.myDefaultFont {
  font-family: "MyBryantM", Avenir, sans-serif;
  border: 0px solid black;
  padding: 0px;
  border-radius: 3px;
        
}

.myDefaultFont2 {
  font-family: "MyBryantB", Avenir, sans-serif;
  border: 0px solid black;
  padding: 0px;
  border-radius:3px;
}

.myDynamicFont {
  font-family: "MyBryantB", Avenir, sans-serif;
  border: 0px solid black;
  padding: 0px;
  border-radius:3px;
}



.myMachineFont {
  font-family: "MyBryantB", Avenir, sans-serif;
  border: 0px solid red;
  padding: 0px;
  border-radius:3px;
    
}

Much of the text is being displayed in JSXGraph. That library has a cssClass.

Sample of text display with JSXGraph:

fontS1=16;
color2='#2399B9';
t4a = board.create('text',[image3.X()+1.88,image3.Y()+1.78,"12% Tax($)"],{
fontSize:fontS1, strokeColor:color2, cssClass:'myDefaultFont', fixed:true});

The text display generally has the correct font, but the bold/medium does not seem to be "working".

I would appreciate support on making a CSS stylesheet to display fonts correctly.

Your support is most appreciated

Jim