Fonts embedding

Vladimir Horsky · Fri Jan 02, 2026 12:59 pm

According to the documentation for the latest version of Toolbox, it is recommended to include Google fonts in the skin to comply with GDPR. But the documentation is unclear for me and I don't understand it.
The latest documentation says to use Google Web Fonts Helper at https://google-webfonts-helper.herokuapp.com/fonts. However, this page does not exist.
And when I use fonts.google.com, which was recommended in previous versions of Toolbox, I only download fonts in TTF format. At the same time, there is a recommended CSS class:

Code: Select all

// <weight>: Use a value from 300 to 800
// <uniquifier>: Use a unique and descriptive class name
.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

and html code for embedding into <head>:

Code: Select all

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

Is it possible to use TTF fonts at all?

I am using Toolbox version 4.4.0. So I added the downloaded files "OpenSans-Italic-VariableFont.ttf" and "OpenSans-Italic-VariableFont.ttf" to the baggage, and I created the Fonts.css file, which I modified as follows:

Code: Select all

.open-sans-variable {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  src: local,
       url('../OpenSans-VariableFont.ttf' format('ttf'),
	   url('../OpenSans-Italic-VariableFont.ttf' format('ttf');
}

and I edited the _google_webfonts.html file:

Code: Select all

<!-- If you use Google Web Fonts please include Open Sans as it is the preferred font for the skin's own UI -->
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> -->
<link type="text/css" href="../css/Fonts.css" rel="stylesheet">
<link href="../css?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

But it still doesn't work.
Can anyone tell me where I'm going wrong?

Vladimír

Unread post by **Tim Green** » Fri Jan 02, 2026 3:51 pm

Hi Vladimir,

This apparently needs to be updated. The helper now appears to be at (I haven't tested it yet):

https://gwfh.mranftl.com/fonts

Once you get the woff fonts you should be able to follow the instructions in the help. I'll check it out in the meantime -- please let me know if it works for you.

Unread post by **Tim Green** » Fri Jan 02, 2026 5:06 pm

I just checked this and the Google Web Fonts Helper in the new location will give you exactly what you need.

IMPORTANT: You don't need all the code from Google that you show in your example when you are hosting the fonts yourself. That is just for dynamic web fonts hosted by Google. So please remove all that from your skin again. You just need to get the woff and woff2 fonts and the matching CSS code using the ../ path in the helper (the fonts won't be found if you don't set that because all the paths in the CSS generated by the helper will be wrong).

Basically, just follow the instructions in this topic using the new helper location:

https://www.it-authoring.com/info/pp5he ... fonts.html

Vladimir Horsky · Sat Jan 03, 2026 1:44 pm

Hello Tim.
Thank you for your quick help. I tried it and it really works.

Only in my case, GoogleFonts.css did not exist, so I had to create it and add it to Baggage Files.

BUT: I noticed that some fonts in the document are not as I would expect, and I found that, for example, font-family: "'Open Sans',Arial,Helvetica,sans-serif" defined in hm_webhelp_main_desktop.css is again overwritten in hmprojectstyles.css back to "Arial,Helvetica,sans-serif".
So I wanted to ask, where is the source of the hmprojectstyles.css file? Where can I edit it? Or is it a fixed file in H&M and cannot be changed?
Or should I copy it from the existing installation, paste it into Baggage Files in the skin, and edit it there?
Or, ideally, should I edit hm_webhelp_main_desktop.css and to the definition on first lines:

Code: Select all

/* Reset Styles for Consistency */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
	padding: 0;
    border: 0;
    vertical-align: baseline;
}

should I add:

Code: Select all

font-family: <%UIFONT_DESKTOP%>;

?

I am using H&M 8.5.0 and Premium Pack Toolbox 4.4.0, so it is possible that this has already been fixed in newer versions.

With regards
Vladimír

Vladimir Horsky · Sat Jan 03, 2026 2:04 pm

Hi
That was probably an unnecessary question.
I looked at the styles used in the current online manual and used the third option (I edited hm_webhelp_main_desktop.css and added font-family: <%UIFONT_DESKTOP%>; into resetting styles on first lines) and everything works as it should.

Vladimír

Vladimir Horsky · Sat Jan 03, 2026 2:39 pm

And one important note: if you are using Eastern Europe charset, you have to choose Latin-Ext charset on Google Webfonts Helper before downloading the font:

Eastern Europe charsets.png

BR
Vladimír

Unread post by **Tim Green** » Mon Jan 05, 2026 7:07 am

Hi Vladimir,

Only in my case, GoogleFonts.css did not exist, so I had to create it and add it to Baggage Files.

That means you are not using a skin set up for this and there is no support for this in that skin. Then everything we have discussed here is irrelevant. You are probably using one of Help+Manual's standard skins. Those instructions ONLY apply to the Premium Pack skins, which can be found in the Premium Pack subfolder of \Templates\HTML Skins\ after you install the Premium Pack.

Vladimir Horsky · Mon Jan 19, 2026 6:15 am

Hello Tim
I am using slightly modified skin Modern_Standard_WebHelp.hmskin from "C:\Program Files (x86)\EC Software\HelpAndManual8\Templates\HTML Skins\Premium Pack 4.4.0\V4 Modern Standard WebHelp Skins".
Vladimir

Unread post by **Tim Green** » Mon Jan 19, 2026 10:23 am

Vladimir Horsky wrote: Mon Jan 19, 2026 6:15 am I am using slightly modified skin Modern_Standard_WebHelp.hmskin from "C:\Program Files (x86)\EC Software\HelpAndManual8\Templates\HTML Skins\Premium Pack 4.4.0\V4 Modern Standard WebHelp Skins".

That should be OK then.

Help+Manual Forums

Fonts embedding

Fonts embedding

Re: Fonts embedding

Re: Fonts embedding

Re: Fonts embedding

Re: Fonts embedding

Re: Fonts embedding

Re: Fonts embedding

Re: Fonts embedding

Re: Fonts embedding