theme: switch font

[McShelby]

Currently the used fonts have difficulties to display unicode characters for chinese and other languages.

Additionally reconsider support font formats. Probably woff and woff2 are enough.

Switching fonts may impact a site's look&feel, so better hide the new font behind a config parameter.

Reference: matcornic/hugo-theme-learn#324

[The-going]

Today I picked up fonts from those that are installed in my system for the correct display of Cyrillic.
These are three different fonts. They are displayed very similar to the font in the theme.
What do you think might be the side effects?
Do I need to place them in the 'static/fonts' folder for the site?

[McShelby]

I still haven't had the time to work on this. So this issues is currently just a reminder for me to not forget about this.

Another idea is, to have CSS variables to override the fonts of the theme to make your use case easier.

What do you think might be the side effects?

Because two fonts can be pretty different even if they are displayed with the same font-size, stuff like margins between paragraphs could look a bit off.

Also, in an open environment, you may have to consider copyrights for your used fonts.

[The-going]

I think you closed the discussion prematurely.
The font Work Sans is a variable font and belongs to the categories grotesque, decorative, for titles, for texts. The headset contains 2 files. Supports 63 languages. It has a SIL OFL 1.1 license. It can be used in commercial and non-commercial activities. The development of the Work Sans font was carried out by Wei Huang.

Today I use Open Sans as the main font.
The Open Sans font is a variable font and belongs to the categories grotesque, decorative. The headset contains 2 files. Supports 73 languages. It belongs to the Open Sans font family. It has an Apache 2.0 license. It can be used in commercial and non-commercial activities. The Open Sans font was developed by Steve Matteson.

And from my point of view, it is more preferable for a multilingual site. But there are some details.
I had to make a separate css file for the fonts in order for the design of the source site to be as close to multilingual as possible.

font-mix.css

body #chapter h1 {
    font-size: 3.5rem;
}

#chapter h2 {
    font-family: "Open Sans", "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-weight: 300;
    text-align: center;
}

body {
    font-family: "Open Sans", "Source Sans Pro", "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    #font-weight: 300;
    #line-height: 1.6;
	letter-spacing: 0.7px;
	text-rendering: optimizeLegibility;
    font-size: 16px !important;
	color: var(--MAIN-TEXT-color) !important;
}

h2, h3, h4, h5, h6 {
    color: var(--MAIN-TITLES-TEXT-color) !important;
	font-family: "Open Sans Semibold", "Work Sans", "Helvetica", "FreeSans", "Open Sans", sans-serif;
	#text-rendering: optimizeLegibility;
	color: #5e5e5e;
	letter-spacing: 0.8px;
	#font-size: 28.0px !important;
}

h1 {
	font-family:  "Cantarell Light", "Open Sans Light", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
	#font-weight: Thin; # Thin or Light
	#line-height: 0.8;
	text-align: center;
    text-rendering: optimizeLegibility;
    color: var(--MAIN-TEXT-color) !important;
    letter-spacing: -1px;
	font-size: 48px !important;
}

/* Redefines headers style for font-family: "Open Sans Semibold" */

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
}

#body h2 {
  font-size: 2.4rem;
  #font-weight: 400;
  margin-top: 2rem;
}

#body h3 {
  font-size: 2.1rem;
  #font-weight: 400;
  margin-top: 2rem;
}

#body h4 {
  font-size: 1.8rem;
  #font-weight: 200;
  margin-top: 2rem;
}

#body h5 {
  font-size: 1.5rem;
  #font-weight: 200;
  margin-top: 2rem;
}

#body h6 {
  font-size: 1.2rem;
  #font-weight: 200;
  margin-top: 2rem;
}

code, kbd, pre, samp {
    font-family: "Hack", "PT Mono", "Source Code Pro", "Consolas", menlo, monospace;
    font-size: 110%;
    vertical-align: baseline;
}

code {
	font-family: "Hack", "PT Mono", "Source Code Pro";
	#font-size: 110% !important;
	line-height: 1.3;
    border-radius: 2px;
    white-space: nowrap;
    color: #5e5e5e;
    background: #ffffff;
    border: 0px;
    padding: 0px 3px;
}

div.proto {
    font-family: "Font Awesome 5 Free";
    font-weight: 500;
    font-family: "Hack", "Source Code Pro", "Consolas", menlo, monospace;
    font-size: 115%;
}

It probably makes sense to reopen this issue, and other people will be able to say their opinion here.

[The-going]

There is no call in my message to change the main font again. This is not a solution. There are more than 270 languages in our country alone, and 105 of them are used in the state education system. There are approximately 260 languages in Europe and 24 languages are officially used equally in European institutions. I think we should try to change the font and its size by applying global variables, by analogy, as with colors.

[McShelby]

Because of the used weights it is tricky to solve this generally by just CSS variables. To do it right, this requires more knowledge about font options in CSS then I currently have.

The better way would be to leave this to the user by providing a custom CSS file and redefine some rules. Sadly, those changes are fragile and must be checked by the user after every update.

The aim of this issue was, to make single languaged text look good. See referenced issue. Goal achieved.

Nevertheless, I don`t like Open Sans very much, primarily because of not providing proper versioning. See https://github.com/googlefonts/opensans/issues

[The-going]

Thank you for your work. If I have a workable option in this matter in the future, I will provide it for your consideration.