0

Hi I'm using Mosk font in my web application and hosting those fonts. Fonts seems to be loaded correctly via font face and webpack file-lodader for (.ttfs).

@font-face {
    font-family: "Mosk";
    src: url(../_assets/fonts/Mosk_Typeface/Mosk_Medium_500.ttf) format("truetype");
    font-weight: 500;
}

Webpack file loader for ttfs.

 {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'static/media/fonts/[name].[hash:8].[ext]'
          }
        }]
      },

This is how is the font displayed in browsers. Wrongly displayed font

image 2

Do you have any suggestions on how to fix it or what could be the issue please?

I partially solved the issue by using another generator but, it's not completely good. I dont know why but the image below as you can see some letters are bolder then others.

18px font-size

franzp
  • 109
  • 1
  • 2
  • 15
  • And what is wrong with it? – xxxmatko Jun 22 '18 at 12:26
  • well lets see, the letter n is bigger than every other y ass well x w and so on... – franzp Jun 22 '18 at 12:27
  • I suggest to try another soft to create the font face, for instance https://www.fontsquirrel.com/tools/webfont-generator, I've tested it with the Mosk font and the result was correct. I've tested another tool to create font face kits and with some of them the result was just like yours, so I assume it depends on the tool you use to convert from ttf to woff. – xxxmatko Jun 22 '18 at 12:41
  • So what does your dev console say? Does it say the entire text is styled with your font, or does it show a different font getting applied? Also, on a webdev note, [don't use ttf directly](https://stackoverflow.com/a/37091681/740553). – Mike 'Pomax' Kamermans Jun 23 '18 at 17:57
  • I partially solved the issue using other generator provided by @xxxmatko but I'm not quite there yet, when I use larger font size it just looks badly. – franzp Jun 24 '18 at 19:06
  • you have to probably play with the settings of the generator you are using.or just try some free google font instead – xxxmatko Jun 24 '18 at 20:01
  • And what do you mean by "when I use larger font size it just looks badly"? – xxxmatko Jun 25 '18 at 04:42
  • Well some strokes are thicker than the others and stuff like that. Dont know what to do with this. – franzp Jun 30 '18 at 09:30

0 Answers0