A major benefit of MadCap Flare is that it lets you take control of the look and feel of your outputs, creating and maintaining consistency through all your help files. But what do you do when you need to use custom fonts (such as Google Fonts) in your Flare outputs? Maybe your company requires you to use a custom font in MadCap Flare to match with the overall brand? Here’s a quick, easy guide on how to use custom fonts in your Flare outputs.

PDF Output

In order for custom fonts to work in PDF output, they must be installed on the computer building the output.

  1. Install the font.
  2. In Flare, select your new font in your stylesheet.
  3. Build the PDF.

When viewing the PDF from any computer you will be able to see the custom Font.

HTML5 Output

If someone is viewing your HTML5 output and they do not have the font installed on their computer, they will not see your custom font. In order for end users to see the font, you must include the font file within your output. Here’s how to add custom Fonts to your output.

  1. Download the custom font.
  2. Create a “Fonts” folder in your “Resources” folder.
  3. Drag the font file you downloaded into the Fonts folder. (You can do this outside of Flare within File Explorer)
  4. In Flare, open your Stylesheet in the Text Editor view (Right Click > Open With > Internal Text Editor)
  5. At the top of your stylesheet add the following code:
   font-family: 'Bree Serif';
   src: url(../Fonts/BreeSerif-Regular.ttf);
  1. Use the name of the font in the elements you would like to have use this font. Example:
   font-family: 'Bree Serif';
  1. Build and view output.

You will see your custom font in your output when viewing it on your computer. To verify that everything is working correctly, try viewing the output on another computer that doesn’t have the same font installed.



  • The font-face property allows you to name a font and point to where the font file is located. For more on the font-face property please visit the following URL: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
  • The @font-face rule can have “font-family” defined as any name. However, I recommend using the default name seen in Flare. You can find out what name Flare is reading the font by going to the Home Ribbon and selecting the Font dropdown. The reason I recommend this is because if the font name is different than what appears in the dropdown, the PDF outputs will have to point to a different font name than your HTML5 outputs.
  • In the @font-face rule, make sure the “src” points to the path where the font file is located. This path may change depending on where your stylesheet is located with respect to where you have placed your font file. For more on file paths please visit the following URL: https://www.w3schools.com/html/html_filepaths.asp
  • Make sure Flare is closed before installing the custom Font. If you’ve installed the font while Flare is open, you may notice it cannot be selected within the Flare UI. If this is the case, close and reopen Flare.

Here’s a download link to a Flare project that shows how this is accomplished: Custom Fonts.flprjzip

If you have any questions about using custom fonts or want to see this in action, feel free to reach out!

About The Author

Justin Bondoc

About Justin Bondoc

Justin Bondoc, Sales Engineer II, started at MadCap Software as a technical support engineer and turned to the evangelism team to promote the value of MadCap Software’s products and services to the community. In addition to spending his time educating potential and existing customers about all things MadCap Software, Justin likes listening to hip-hop, tackling his next art project, and exploring his creative side.

Last Modified: January 19, 2018

This entry was posted in MadCap Flare, Tips & Tricks. Bookmark the permalink.


  • SLR June 8, 2017 at 10:40 AM

    Is there a way to embed fonts while “Exclude content not linked directly or indirectly from the target” is selected in the Target?

    • Justin Bondoc Justin Bondoc June 21, 2017 at 10:33 AM

      If the target option “Exclude content not linked directly or indirectly from the target” is enabled the font will be removed from the output because no active files are linking to the font file. In this case the workaround is to insert a link to the embedded font in a master page and hide the link using the “display: none;” CSS property.

      • Gayle Kidder January 9, 2018 at 11:57 AM

        If you’re using Google fonts, can’t you just insert the stylesheet link with full url in the head of the master page like this:

        Won’t it accomplish the same thing?

        • Justin Bondoc Justin Bondoc January 9, 2018 at 1:43 PM

          Hi Gayle,
          Yes that would work also! However, including the font file itself within the Flare project will also ensure fonts render correctly should you ever decide to distribute the help locally without any access to the internet.

  • Danielle July 5, 2017 at 6:31 AM

    I noticed in your example that you used only one (the regular) Bree Serif font file. I’m wondering, is there a way you can use multiple font files? For example, I’m using PT Sans and want my H1s to use the bold font file, but want my body text to use the regular font file. The bold font file makes the H1s bolder than just defining “font-weight: bold;” in the CSS.

    • Justin Bondoc Justin Bondoc July 5, 2017 at 3:47 PM

      Yes this is possible. To accomplish this you would write another @font-face rule that points to the separate font file.

      • Danielle July 11, 2017 at 8:30 AM

        Another question, I’m currently using a Tripane skin and noticed the tripane navigation tabs (TOC, Index, Glossary) as well as the “Search” box are not using the font files I just embedded into my Styles.css file using @font-face. Do you know if I need to add the @font-face attributes somewhere in the skin file?

        • Justin Bondoc Justin Bondoc July 11, 2017 at 11:35 AM

          Great question! In order to apply the change in a Tripane skin some changes would need to be made post-build. Apply the font-family value set in step 5 (of the blog post), to elements in the Tripane skin via the Skin’s Styles tab. DO NOT select the font-family from the list of installed fonts, this will reference the installed font rather than the embedded font, instead type the name in manually. Build the Tripane target and open the output folder in Windows Explorer
          Navigate to Skins\Default\Stylesheets and open Styles.css in a text editor
          Repeat step 5 but change the relative path so that it points from the location of Styles.css to the font within the output. For this example it would look like this:
          @font-face {
          font-family: ‘Bree Serif’;
          src: url(../../../Content/Resources/Fonts/BreeSerif-Regular.ttf);
          Once this is done, open the output and confirm that the font is working in the skin.

  • John Moore August 21, 2017 at 12:52 PM

    Does this method also work for the .OTF file format, or do the files need to be converted?

    • Justin Bondoc Justin Bondoc August 21, 2017 at 1:42 PM

      Yes this will work for the .OTF file format. Just place the .OTF file directly into the Flare project.

      • John Moore August 21, 2017 at 6:10 PM

        Thank you, Justin!

  • Nate Wolf March 5, 2018 at 10:43 AM


    Having trouble getting this to work. I was going to take a look at the example project, but got a 404. Can you relink it?

    Thanks much!

    • Justin Bondoc Justin Bondoc March 13, 2018 at 9:08 AM

      Hello Nate,
      Sorry about that! The link has been updated. Please let us know if you run into any issues in downloading the project.

  • Alison Turner June 19, 2018 at 3:47 AM

    Thought I would add a bit of information. I was having trouble with Internet Explorer not using my custom fonts properly. This was solved by adding the .woff font option available too, my code then looked a bit different to accommodate both the .ttf and .woff options:

    font-family: 'Droid Sans';
    src: url('../Fonts/DroidSans.ttf') format('truetype'),
    url('../Fonts/DroidSans-webfont.woff') format('woff');

  • Mike Platt July 12, 2018 at 4:04 AM

    This doesn’t seem to work with the new SideNav template.

    The build process seems to remove the @font-face entry from the stylesheet.

    • Justin Bondoc Justin Bondoc July 12, 2018 at 8:56 AM

      Hi Mike,
      Thanks for reaching out. This shouldn’t be an issue specifically tied to HTML5 Side Navigation. Would you be able to open a ticket with our support team to troubleshoot this issue further?


  • Amruta Deshpande July 16, 2018 at 11:06 PM

    Hi Justin,

    I am working on MadCap Flare top navigation project. I have installed the font ‘Lato’ inside the Resource folder. I have added following code in the respective styles.

    font-family: ‘Lato’;
    src: url(../Fonts/Lato-Regular.ttf);

    When I generate the output, The custom font is getting rendered. But when I open the output on the other system which does not have MadCap Flare and custom font installed, the custom font is not getting rendered. Please advise.

    • Justin Bondoc Justin Bondoc July 18, 2018 at 10:42 AM

      Hi Amruta,

      Without looking at the project this may be a case of “Exclude content not linked directly or indirectly from the target” being enabled in the target which is excluding the Font file.

      If the target option “Exclude content not linked directly or indirectly from the target” is enabled the font will be removed from the output because no active files are linking to the font file. In this case the workaround is to insert a link to the embedded font in a master page and hide the link using the “display: none;” CSS property.

      If you find that this is not causing the issue please open a ticket with our technical support team and they will be able to troubleshoot further.

      Thank you!

  • Alicia December 14, 2018 at 12:25 PM

    Thanks for these instructions. They work great. For some reason though, it doesn’t work on Chrome. Does anyone know if there is there any known issue with Chrome and custom fonts? If so, is there any work-around? I’m using Chrome Version 71.0.3578.98 (Official Build) (64-bit)

    • Jennifer Morse Jennifer Morse December 19, 2018 at 11:43 AM

      Hi Alica, without doing a bit more investigating, the first thing that comes to mind is that Chrome may not support the font you are using. Might be easier to call into support for since it would require some more info so that we can best advise.

Have Something to Say?

Your email address will not be published. Required fields are marked *