JavaFX CSS font-face incorrectly display

Question

I am making a software for a local race of the country. The customer intends to use their own font. I have embedded it in fxml. The directory structure:

I have loaded it in CSS file:

@font-face {
   font-family: 'NamKhoneUnicode';
   src: url('NamKhoneUnicode_v2.0.ttf'); 
}
#txtWord {
    -fx-font-family: 'NamKhoneUnicode';
}

And my sample FXML:

<TextField fx:id="txtWord" HBox.hgrow="ALWAYS" text="မၢၵ်ႇၵႅမ်ႈၶွင်ႇ" />

The result is:

Seems like there are additional dotted rounds. What might be the cause of these? The font may be unicode.