The printed version of my cookbook uses Century Gothic as font. Unfortunately that font is not available at each and every computer. Therefore the HTML version ended up looking different based on font availability.
I tried to mitigate this problem by providing several fallbacks in the CSS font definition:
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
This still does not do the job, so I started looking into Century Gothic web alternatives. I decided to go for Roboto as font for the HTML variant. This font is available on Google Fonts and because of that it can be used on all web browsers.
I added an additional stylesheet to the HTML files to load the fonts:
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
My font definition is then super simple with only a minimal fallback.
font-family: 'Roboto', sans-serif;
#HTML
#CSS