Source Sans Pro

[urbanrobots]

Hi,
We will use Source Sans Pro for the font in the HTML Webhelp. We have a separate CSS to maintain the font references. The CSS looks like this:

Code: Select all

@font-face {

  font-family: 'SourceSansPro-Regular';

  src: url('../oxygen-webhelp/resources/styles/fonts/SourceSansPro-Regular.otf'); 

       

  font-style:   normal;

  font-weight:  400;

}

Unfortunately, even though we include the font's OTF files in the deliverable, the Source Sans Pro font is not being picked up in the output. However, strangely, if we simply copy the OTF files over into the output, then the fonts render in Source Sans Pro without any problems.

When we publish, the font reverts to Verdana. This is understandable because it's the backup font.

Code: Select all

body {                     

  line-height: 20px;       /* overrides webhelp_topic.css  */

  font-family:  'SourceSansPro-Regular', 'Open Sans', Verdana, Geneva, sans-serif; 

  font-weight: 400;

  min-width: 800px;  

  }

I have tried to reference the file in different ways, including have it be in the CSS file for the skin. None of this works.

Any ideas on how to ensure that Source Sans Pro renders in the Oxygen HTML Webhelp output?

Thanks for your time.

Take care,
Nick

[alin]

Hello,

In order to debug this problem I need you to answer the following questions:

1. Are you using a the standalone distribution of WebHelp plugin or the one that comes bundled with oXygen?
2. Which version of WebHelp plugin or oXygen are you using?
3. Where is the CSS file that declares the @font-face located?
4. How do you contribute it to the WebHelp output? Are you using the args.css parameter?

Regards,
Alin

[urbanrobots]

Hi Alin,

Thanks for your time. Here are some answers:
1. We use the standalone Webhelp plugin with DITA OT 1.8.5.
2. We use v17.1.
3. The CSS file that declares the @font-face attributes is located in the styles folder of the plugin.
4. Yes, it's referenced using the args.css parameter to this location:

com.oxygenxml.webhelp/oxygen-webhelp/resources/styles/fonts/SourceSansPro.css

In the output, the reference in args.css moves to the "styles" folder at the root of the output.

The path to the font is correct in the SourceSansPro CSS file. It's just that you must replace the .otf files with another copy of the same files to make this work.

The output structure looks like this:

Code: Select all

|    source

|    context-help-map.xml

|    dita.list

|    dita.xml.properties

|    our_logo.png

|    index.html

|    log.txt

|    oxygen-webhelp

|    |    check.html

|    |    index.html

|    |    check.html

|    |    noScript.html

|    |    resources

|    |    |    css

|    |    |    img

|    |    |    js

|    |    |    localization

|    |    |    skins

|    |    |    |    desktop

|    |    |    |    desktop-frames

|    |    |    |    skins.css (generated from original css file)

|    |    |    styles

|    |    |    |    footer.html

|    |    |    |    fonts

|    |    |    |    |    SourceSansPro-Regular.otf

|    |    |    |    |    SourceSansPro.css

|    |    |    |    images

|    |    |    |    original_css_file_for_skin.css

|    |    search

|    styles

|    |    commonltr.css

|    |    commonrtl.css

|    |    SourceSansPro.css  (copied from resources/styles)

If we simply take the SourceSanPro-Regular.otf file from the plugin and copy it over to the output in the same location (resources/styles/fonts), then the output renders Source Sans Pro, no problem. Strange, right?

Thanks for your time.

Take care,
-Nick

[urbanrobots]

Hi again Alin,

It turns out that something indeed changes with the font when the plugin copies the font into the output.

In the plugin, the SourceSansPro-Regular.otf file is 230 KB.
In the output, the SourceSansPro-Regular.otf file is 358 KB.

Have you seen this before?

Take care,
-Nick

[alin]

Hello,

This is a very strange situation indeed. Can you please try setting the clean.output and clean.temp parameters to yes?

Another solution is to to refer the font from the Google Fonts website: https://fonts.google.com/specimen/Sourc ... e+Sans+Pro

For example:

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

or

Code: Select all

<style>

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro';

</style>

Regards,
Alin

[urbanrobots]

Hi Alin,

We are indeed referencing the web version of the Source Sans Pro font. However, Google is blocked in China and this causes problems with Oxygen Webhelp delivered using a font reference to Google. So, we prefer embedding the font in the deliverable.

Adding the DITA clean.output and clean.temp does not fix the strange issue.

Thanks for your time.

Take care,
- Nick

[alin]

Hello,

If you want to embed the font in the WebHelp deliverable, you might consider embedding it directly into the CSS file by converting the font file into the base64 format and reference it using the DATA URI scheme. You can use an online tool for the base64 conversion. For the example below, I have used this one: https://www.giftofspeed.com/base64-encoder/


For example:

Code: Select all

@font-face {

    font-family: 'Source Sans Pro Regular';

    src:url('data:font/truetype;base64,AAEAAAAT.....O5nfJBNn5nt3Wbz8zAQpSoc=');

}

The font content string was reduced due to forum message character limit.

If this workaround does not meet your needs, please let me know, in order to find another solution.

Regards,
Alin