![]() The print section of the stylesheet can have its own :root element where you can change the font-family variables to use the print fonts:īecause I haven’t changed the heading font here, the print output will still use Raleway for the heading elements. ![]() Or, when setting up the stylesheet through a text editor, you can use a CSS shortcut like the following, though you’d still need to set other values such as the font size separately for each element: You can do this for each element case-by-case: Because all HTML elements in your topic files inherit settings from the body tag, you can use body to define the primary font using a variable:īecause all elements in the topic will now use “FontText” by default, you need to assign the heading or code font to elements as needed. In CSS, you do not have to define the font family for every element you use. Including a generic font-family value such as sans-serif or monospace tells the browser to use its standard typeface of that kind if the first font family is not available for some reason. In the sample above I also define a variable for a code typeface. Branding standards can change, after all. FontCode: 'Source Code Pro', monospace Įven when using the same typeface for body text and headings, I like to define separate variables for the two to maximize flexibility. In the default :root section, specify the HTML fonts: Using CSS variables makes this a lot easier. I’ll demonstrate this using the Raleway font for HTML:įor PDF I use the Rokkitt serif font, which is also a free Google font:įont-family: Rokkitt, serif Variables for Font Familiesīecause the print section of your stylesheet inherits the HTML font-family values automatically, you need to override font-family for elements in the print section. When you use different fonts for HTML and PDF, the structure of the stylesheet makes a big difference with how easy your setup is to manage. ![]() You’ll notice the problem only on another machine where the font isn’t installed, so be sure to test the output with other devices. The output will still look fine on your Flare machine because the browser will be able to locate the font installed on Windows. Suppose that the stylesheet syntax that points the browser to the font file in your HTML output contains an error. Although the font drop-down on the Home ribbon indicates the typeface specified in the stylesheet, you will not see that typeface rendered in the XML editor until you install the font.Īfter you have installed a font, It’s easy to get fooled by an HTML output. Fonts need be installed if you want the Flare GUI to reflect the typographical look and feel of the outputs.Fonts must be installed on the Windows operating system to be used by the Adobe Acrobat distiller when generating a PDF.If you are using a custom typeface, you should install the font files on your Flare machine for two reasons: I’ll also demonstrate how CSS variables make it easy to specify different typefaces for HTML and PDF outputs. In this article, the third of four, I’ll show you how to install custom typefaces so that they can be used in PDFs and the Flare GUI. Generating a PDF through Flare eliminates a lot of that work because it automatically embeds the fonts in the. In the previous article of this series, I showed you how to add font files to your MadCap Flare project so that your HTML outputs looked the same across all devices. When he’s not occupied with all things Flare, Jay writes fiction under the pen name JB Strand. After discovering MadCap Software tools over a decade ago while working as a technical writer in Seattle, he has designed and implemented Flare projects for clients in government, law, education, healthcare, and technology. Jay is an independent consultant and certified MadCap Software Advanced Developer who is passionate about using CSS to enhance the power of MadCap Flare. ![]() This guest post was written by Jay Slagle and is part three of a four-part MadCap Flare CSS series. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |