How to customize fonts

[novikoffav]

Hi! I tried to customize fonts in typography.less but without success. I tried to combine google fonts Open Sans and Montserrat using @import url, but it does not work for me.

Would you please provide a code or some instruction how to do this?

[Vitaliy-1]

Hi @novikoffav,

In general, we are adding fonts through PHP and then assigning it to a variable in LESS.

I've never assigned it through import. What code you are trying to use and what errors do you see?

[novikoffav]

Today I tried to change fonts in PHP and in LESS as you described, but I still experience problems - it looks that browser applied some defaul fonts instead of provided by me.

In particular, I have changed a line
'https://fonts.googleapis.com/css?family=Droid+Serif:200,200i,400,400i|Fira+Sans:300,300i,400,400i,700,700i',
onto
'https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i|Open+Sans:400,400i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,latin-ext',

and I also specified fonts in Variables.less:
@font-sans: 'Open Sans', sans-serif;
@font-serif: 'EB Garamond', serif;

Before that I tried to insert the code dirrectly in the beginning of the file typography.less and this also did not work for me :

<style> @import url('https://fonts.googleapis.com/css?family=Montserrat:200,200i,400,400i|Open+Sans:300,300i,400,400i,700,700i'); </style>

[Vitaliy-1]

After changing the code in PHP and in LESS, what do you see in the browser's console? Are there any errors? Does this font apply?

[novikoffav]

I do not see there any special errors. There are only two errors and few notifications in browser console, but I think they are not related to fonts (please see screenshot).
What I actually found: Before changing fonts there was an issue - when page was displayed on Cyrillic, and if the title of article was containing both cyrillic and latin words, then cyrillic words were displayed by different font which was a bit smaller than that applied to latin words. As a result in this case the whole title of article was represented by words of different sizes due to different fonts applied, as I think. After changing fonts in PHP and LESS, the whole title containing both cyrillic and latin words, now is displayed by single font and all words are of the same size but it is still not the font which I indicated in PHP and LESS, it is some default font like Times New Roman or something simillar.

[Vitaliy-1]

Yeah, nothing related. I've tested and except non-adjusted font sizes, new fonts are displayed correctly.
Can you confirm that you added a link to the PHP file as:

$this->addStyle(
				'fonts2',
				'https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i%7COpen+Sans:400,400i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,latin-ext',
				array('baseUrl' => '')
			);

and replaced variable in LESS as:

@font-sans:         'Open Sans', sans-serif;
@font-serif:        'EB Garamond', serif;

Did you do this in a core theme files or through a child theme?
If you did it through child theme, can you show an example via GitHub? If it's modified Health Sciences theme, can you fork the repository and commit your changes there, so I can take a look at the code?

As per another question, regarding original fonts, I'm not sure why Cyrillic isn't rendered. @sssoz, I don't see Droid Serif fonts in the list of Google Fonts. Google refers to an external site: https://fonts.google.com/?query=droid+serif. On the other hand, the link provided in the theme is working: https://fonts.googleapis.com/css?family=Droid+Serif:200,200i,400,400i|Fira+Sans:300,300i,400,400i,700,700i. And it states, that Droid Serif supports Cyrillic (apparently not). Can you clarify this issue because I'm confused?

[sssoz]

@Vitaliy-1

@sssoz, I don't see Droid Serif fonts in the list of Google Fonts. Google refers to an external site: https://fonts.google.com/?query=droid+serif

This is also confusing -- it is possible that the font was once on Google Fonts (I had made sure that they were all taken from there) but the foundry (in this case, Monotype) decided to change the way it distributes it. Since it was once on there, I’m guessing they kept it on the Fonts API.

It looks like Monotype has started charging for that font, which was once free.

I figured that linking to the Google Fonts API would be useful, since any updates / improvements made to the font files would be propagated on the OJS instances using that theme... but do you think it would be a better idea to load the font files as part of the theme, in the static assets directory, instead?

[sssoz]

Looks like other people have noticed: google/fonts#1223 (comment)

I guess the reason behind that is that e.g. Droid Sans (which can still be downloaded e.g. via https://fonts.googleapis.com/css?family=Droid+Sans or places like 1001fonts.com, and for Latex via at http://www.tug.dk/FontCatalogue/droidsans/ resp. https://ctan.org/tex-archive/fonts/droid/) lacks many Unicode characters, which are, in turn, supported in the commercial font "Droid Sans Pro" by "Ascender Corporation" and, I presume, Google chose not to add more characters to the "Droid Sans" font under the Apache 2.0 license essentially in order to avoid potential legal issues with the commercial version.

[ViRuSTriNiTy]

@novikoffav You could create a child theme based on health sciences, disable CDNs and add a less file with the appropriate rules to override the fonts used.

[webnucleo]

Not related to this theme, but I found the same problem in defining in the child-theme (Immersion Theme) the inclusion of a new google font. Didn't work. My case reported here: [https://forum.pkp.sfu.ca/t/change-fonts-child-theme/67209/2]