How can I change the font of post?

[BytePrince]

I have read the FAQs but I still have no idea. I have tried to modify each css which including the configuration of the font,but it didn't work.

[danielfdickinson]

All I did was create a assets/css/extended/custom-font.css file in which I have (which is more than you need, and I will be updating for modern CSS):

@media not speech {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 28em) {
    body {
        font-size: 17px;
    }
}

@media screen and (min-width: 36em) {
    body {
        font-size: 18px;
    }
}

@media screen and (min-width: 48em) {
    body {
        font-size: 19px;
    }
}

@media screen and (min-width: 56em) {
    body {
        font-size: 20px;
    }
}

@media screen and (min-width: 64em) {
    body {
        font-size: 21px;
    }
}

.entry-footer,
.footer,
.post-meta {
    font-size: .8em;
}

#menu a,
.pagination a {
    font-size: .9em;
}

.logo a {
    font-size: 1.6em;
}

.archive-meta,
.entry-content,
.page-content,
.page-footnote {
    font-size: .9em;
}

HTH.

Also, in future this type of request belongs in 'Discussions' rather than an issue.

[danielfdickinson]

I interpreted what you asked as 'font-size' -- did you mean 'font-family'? That is the typeface rather than the size?

[BytePrince]

Yes.I am so sorry that I did not descibe it clearly.I try to change the font-family but i have no idea.Looking forward to your guidance.Thanks.

[danielfdickinson]

Have you tried creating a file such as assets/css/extended/font-override.css in your site (not theme) root, with contents such as this silly example (to verify the right font is used)?

body {
    font-family: 'Comic Sans MS', Verdana, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

[BytePrince]

Yes.This is my personal computer under my full control.

[danielfdickinson]

What font is the browser using instead of the noto serif sc? (And a silly question; is noto serif sc installed on that computer)?

[danielfdickinson]

Since it is a web font you need to load the applicable .woff* files for that font to be available on any browser (since it's not installed by default on most devices).

[BytePrince]

microsoft yahei.
noto serif sc is not installed on that computer,but the font of https://zoubingwu.com/ works well on my Chrome.

[BytePrince]

[danielfdickinson]

You need something like

  src: url("fonts/LiberationSans-Bold.woff2") format("woff2"),
    url("fonts/LiberationSans-Bold.woff") format("woff");

in your CSS and to have the *.woff files in your fonts directory in your final output.

The best thing might be to find a theme that uses a web font using pure CSS (the example above is SCSS so might not be exactly right).

Also, looking at Google's information on 'Google Web Fonts' ought to help.