CSS Import Font-face差异

Question

The main text ("Elegance is sublime.") for the site doesn't have quite the right font for some reason. I am looking at my design and live version and they are different.

The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?

https://github.com/marcoantonio123456/Studio

Live version

How it should be

        @font-face {
          font-family: 'Stem-Regular';
          src: url('components/typefaces/Stem-Regular.ttf') format('ttf'),
        }

        .headline-top { position: relative;
            font-family: 'Stem-Regular', sans-serif;
            font-size: 7.8em;
            letter-spacing: 0.8px;

            left: 90px;
            top: 350px; 
            z-index:1;

Answer 1

The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?

Summary:

The font you have is not Stem Regular. Despite the file name claiming to be so.

Details:

The font in your (correct) screenshot is not the same font as on your website . Your website correctly displays the 'Stem-Regular' font as loaded from 'components/typefaces/Stem-Regular.ttf' . Whether this is actually the font with this name, is doubtful.

I have copied your font and used it on a word document and the font displays as your website does. There is nothing wrong with you code or the loaded font file.

The font you have - according to several online font depositories - is NOT the same as Stem Regular, or Stem Regular W03.

You can view Stem Regular W03 here: Fonts.com , Online Web Fonts note the a character is different to your website.

Solution:

Find the correct Stem Regular from another depository or chase up whoever you got this font from. We can not help you as this is not a code issue.