htlatex html output droidsans

Question

I am trying to use the font "Droid Sans" (as in http://www.tug.dk/FontCatalogue/droidsans/) in a html file generated from a tex-file.

PDF

I have succeeded in using the font as standard for a pdf by adding the following lines to my tex-file:

\renewcommand{\familydefault}{\sfdefault}
\usepackage[defaultsans]{droidsans}
\usepackage[T1]{fontenc}

HTML

Now I have tried the same with the tex4ht-Config-File, adding those lines directly after the \Preamble-part (and also I have tried it already anywhere else in the document). The file looks like this:

\Preamble{html,index=2,info,sections+}
\renewcommand{\familydefault}{\sfdefault}
\usepackage[defaultsans]{droidsans}
\usepackage[T1]{fontenc}
\begin{document}

\Css{
    % listings: grey background
    .listings { background-color: \#e5e5e5 ; }
}

% redefine \label to also create a HTML anchor
\let\labelOrig\label
\renewcommand{\label}[1]{
    \HCode{<A NAME="}#1\HCode{"></A>}
    \labelOrig{#1}
}

\EndPreamble

But it doesn't seem to work. The "rendered font" I get for my html-page is always "Liberation Serif", with or without using the commands stated above. How can I make my html-file use Droid Sans?

I am using Ubuntu 14.04

Answer 1

tex4ht doesn't change font used in html file, so your browser's default font is used. You can easily change that using few lines of configurations.

Easiest way to include web fonts is to use some font hosting service, such as Google Fonts. In usage instructions is stated that you should put line

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

to your html head, which you can do with

\Configure{@HEAD}{\HCode{<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />}}

in the cfg file. To enable the font in the document, you also must set this font in the css:

\Css{body{font-family: 'Droid Sans', sans-serif;}}

Complete cfg file:

\Preamble{xhtml,index=2,info,sections+}
\begin{document}
\Configure{@HEAD}{\HCode{<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />}}
\Css{body{font-family: 'Droid Sans', sans-serif;}}
\Css{
    % listings: grey background
    .listings { background-color: \#e5e5e5 ; }
}

% redefine \label to also create a HTML anchor
\let\labelOrig\label
\renewcommand{\label}[1]{
    \HCode{<A NAME="}#1\HCode{"></A>}
    \labelOrig{#1}
}

\EndPreamble

you don't need

\renewcommand{\familydefault}{\sfdefault}
\usepackage[defaultsans]{droidsans}
\usepackage[T1]{fontenc}

in the cfg file.

This is more or less all what is needed, we only have to fix the fact that there is no configuration for Droid Sans font in tex4ht and some characters may be converted badly. So we need to provide .htf files.

DroidSans-t1.htf:

.lm-ec
htfcss: DroidSans-t1 font-family: 'Droid Sans', sans-serif;

and

DroidSans-Bold-t1.htf:

.lm-ec
htfcss: DroidSans-Bold-t1   font-family: 'Droid Sans', sans-serif; font-weight:bold;

these files may look mysterious. first file points to the .htf file which should be used for character conversion, which may be any .htf file in T1 font encoding, as the characters are always same. the second line contains code which should be inserted to the css file, so we may insert info about font weight and font family here.

Sample result: