I know there are a couple of existing threads about this general subject, but I couldn't find one that exactly answers my question. Our client uses the Metric-Regular_2.oft font in the application we are delivering with the Help, so I added the code below to the project's default.css file (and I also added the font file itself to the Baggage files):
src: url("//d1v1s76gnntd7e.cloudfront.net/styles/hpe/MetricWeb-Regular.eot?#iefix") format("embedded-opentype"), url("//d1v1s76gnntd7e.cloudfront.net/styles/hpe/MetricWeb-Regular.woff") format("woff"), url("//d1v1s76gnntd7e.cloudfront.net/styles/hpe/MetricWeb-Regular.ttf") format("truetype");
src: url("//d1v1s76gnntd7e.cloudfront.net/styles/hpe/MetricWeb-Bold.eot?#iefix") format("embedded-opentype"), url("//d1v1s76gnntd7e.cloudfront.net/styles/hpe/MetricWeb-Bold.woff") format("woff"), url("//d1v1s76gnntd7e.cloudfront.net/styles/hpe/MetricWeb-Bold.ttf") format("truetype");
This totally worked to retain the Metric font in my tester's Chrome AND IE browsers (previously, they saw Times Roman in the topics!). So the heart of the system - the topics content - retains the Metric font in both Chrome and IE 11, which is really great, but the header, TOC headings, glossary terms, and list of search results appears to be Trebuchet?
How can I make those Metric, too? I"m using the Charcoal Grey Layout and have clearly specified Metric in its Layout Customization's layout font.
Must I also add the font-face rule to the CSS file of my projects' ScreenLayout>Charcoal_Grey folder, too? I'm a little paranoid about messing up my project in any way at this late stage ...
Most of all, I would love to at least just have Metric in the main Header, if nothing else.
The skin is managed from the layout.css file in /template/layoutname/. Adding the custom font only adds it to the topics, not the skin.
After you add the font-face rules to layout.css, assign it to the body in the same CSS file.