Issues with Open Sans fonts?

This forum is for all Flare issues not related to any of the other categories.
Post Reply
MageWriter
Propeller Head
Posts: 32
Joined: Sat Feb 08, 2014 11:58 am

Issues with Open Sans fonts?

Post by MageWriter »

Flare 10.1, Windows 7

I thought one of the features of Flare 10 was compatibility with Open fonts. I don't see Open Sans in the Flare drop-downs despite having the font installed. What's going on?
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Issues with Open Sans fonts?

Post by Nita Beck »

Flare 10 (including 10.1) is indeed compatible with OpenType fonts, including Google fonts, of which Open Sans is one.

I am personally acquainted with Open Sans because it's my "corporate" font. In Windows 7, in the Control Panel in Fonts, I can see that I've got Open Sans installed. In Flare 10, when I elect to view the installed fonts, I can see (and select) Open Sans, Open Sans Condensed, Open Sans Condensed Light, Open Sans Extrabold, Open Sans Light, and Open Sans Semibold. I know that Flare 10 knows what to do with these fonts because I used Flare 10 to create a 3-fold brochure for MadWorld using Open Sans and several of its variants. When I examine the generated PDF in Acrobat, I can see that those fonts have been embedded.

So I don't know what to suggest about why you're not seeing Open Sans from within Flare 10. I wonder if there must be something else going on with your system. If you've verified that these fonts are correctly installed on Windows, perhaps reach out to MadCap support to see what's going on.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
MageWriter
Propeller Head
Posts: 32
Joined: Sat Feb 08, 2014 11:58 am

Re: Issues with Open Sans fonts?

Post by MageWriter »

Did you install True Type fonts in Windows?

What if anything did you have to do in Flare to cause Open fonts to display?
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Issues with Open Sans fonts?

Post by Nita Beck »

I don't recall doing anything in particular with Flare to have the fonts show up and be selectable. And after downloading the Open Sans fonts from Google Fonts, I just installed them in Windows as I would any other font.

And you're right... what's installed on my computer are TrueType fonts (.ttf), although when I look at the properties of the fonts, they are described as "OpenType Layout,...TrueType Outlines."

I dunno... maybe I'm getting confused about OpenType vs. TrueType, 'cause it's the weekend... ;) All I know is that I've got Open Sans working in Flare 10.1.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
MageWriter
Propeller Head
Posts: 32
Joined: Sat Feb 08, 2014 11:58 am

Re: Issues with Open Sans fonts?

Post by MageWriter »

Thanks. I think the issue was with the first set of True Type fonts I used. I eventually figured out how to download them from Google and now they display in Flare.
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Issues with Open Sans fonts?

Post by simona »

If I may chime in here... I have a related n00b question... :oops:

I have just installed Open Sans on my VM and Flare immediately listed it among the intalled fonts. So I selected it and built my targets and all is well.

But... this means, users of our WebHelp will only see Open Sans if they also have it installed, right? Isn't there any way to embed the font in the WebHelp head directly, e.g. like this

<link href="http://fonts.googleapis.com/css?family= ... ,400italic" rel="stylesheet" type="text/css" />?
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Issues with Open Sans fonts?

Post by NorthEast »

simona wrote:But... this means, users of our WebHelp will only see Open Sans if they also have it installed, right? Isn't there any way to embed the font in the WebHelp head directly
You can use @font-face to define a new font (font-family); the font files could be included in your Flare project, or somewhere online.

I'd recommend reading about @font-face online:

http://css-tricks.com/snippets/css/using-font-face/
http://www.w3schools.com/cssref/css3_pr ... e_rule.asp
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Issues with Open Sans fonts?

Post by simona »

I kinda knew that. What I do not know is where to do this in Flare. I tried putting it in the master page but this doesn't seem to be the right way.
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Issues with Open Sans fonts?

Post by NorthEast »

The CSS itself needs to included in a stylesheet; either add it to a stylesheet you're using, or put it in a separate stylesheet and link to that from the master page.
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Issues with Open Sans fonts?

Post by simona »

We have done that. We installed Open Sans on the machine where Flare is installed, as a consequence Flare listed the font as the available (installed) fonts when we edited the styles.css file, we selected Open Sans in the primary style sheet, then built the output and - voilá - it works like a charm - but only my machine. When I view the WebHelp from a different machine, where Open Sans is not installed, it will not show it.

When we noticed this we added the link rel to the master page in the Flare project. This did not solve our problem. So our CSS geek sent me to the Flare forum to find out how this problem can be solved in Flare.
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Issues with Open Sans fonts?

Post by NorthEast »

I've not used Google fonts before, but your stylesheet link works fine for me - I just inserted it in the head of a master page.

I would make sure you are not using a master stylesheet for either the target or the project. If you do use a master stylesheet, this will remove all other stylesheet links from the output.
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Issues with Open Sans fonts?

Post by simona »

Thanks, Dave, I think I'm beginning to understand how this works in Flare.

Here is how this is set up in our project(s):

1. There are 2 stylesheets in the global project, 1 to play around with and the other called "styles.css" which we consider the default stylesheet for all topics. Additionally, there are some table stylesheets. We automatically import the style sheets into our local projects upon build. The stylesheet "styles.css" contains the following font face definition:

@font-face
{
font-family: 'Open Sans';
src: url('http://fonts.googleapis.com/css?family= ... ,400italic');
src: local('Open Sans');
url('C:\Windows\Fonts\Open Sans');

2. We have 1 master page, because we need to have the same footer in all WebHelp topics. The master page head contains the following style sheet links:

<link href="../../Resources-GLB/TableStyles-GLB/FooterGreyBackground.css" rel="stylesheet" MadCap:stylesheetType="table" />
<link href="../../Resources-GLB/Stylesheets-GLB/Styles.css" rel="stylesheet" MadCap:stylesheetType="text/css" />
<link href="http://fonts.googleapis.com/css?family= ... ,400italic" rel="stylesheet" type="text/css" />

I've run a few tests now. This is what happened:

Scenario 1:
Set master style sheet for the local project and the target to "default".
Result: If I build the target, it will _not_ use the google font, but instead log the following warning: "Missing linked stylesheet http://fonts.googleapis.com/css".

Scenario 2:
Set the target master style sheet to "Resources-GLB/Stylesheets-GLB/Styles.css".
Result: In the built target, the font will _not_ be used, there are no warnings, and in the head of the final output source code I find this:

<link rel="Stylesheet" href="Skins/Default/Stylesheets/TextEffects.css" />
<link rel="Stylesheet" href="Skins/Default/Stylesheets/Styles.css" />
<link rel="Stylesheet" href="Skins/Default/Stylesheets/normalize.css" />
<link rel="Stylesheet" href="Skins/Default/Stylesheets/foundation_custom.css" />
<link rel="Stylesheet" href="Skins/Default/Stylesheets/offcanvas.css" />
<link rel="Stylesheet" href="Skins/Default/Stylesheets/Web.css" />
<link rel="Stylesheet" href="Skins/Default/Stylesheets/Tablet.css" />
<link rel="Stylesheet" href="Skins/Default/Stylesheets/Mobile.css" />

This indicates, that a master style sheet will indeed remove all other styesheet links from the output, just as you said.

And yet I fail to see what we must do. Do we need the font-face definition in the styles.css? Do we need the stylesheet links in the master page? Do we need both? Do we need something else we haven't done yet?

What we want, is to use a master page because of the default footer, and a default stylesheet for all our projects, and the open sans font for users who may or may not have installed the font on their machine.
But how can I do this?
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Issues with Open Sans fonts?

Post by NorthEast »

As you're using Google fonts, forget the @font-face method - that is for when you have the actual font files.

I just added the Google font stylesheet link to a master page, and it worked fine; e.g.

in the master page:

Code: Select all

    <head>
		<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
    </head>
and in the stylesheet:

Code: Select all

body
{
	font-family: 'Lobster';
}
And remember do not set a master stylesheet anywhere.

You get 'missing linked stylesheet' warnings in the build, but it works fine.
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Issues with Open Sans fonts?

Post by simona »

When I do that and view the output on a machine where open sans is _not_ installed, the output has a serif-font and looks worse than ever before.
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Issues with Open Sans fonts?

Post by simona »

Just in case somebody should run into similar issues, allow me to summarize what happened next (after I contacted the awesome guys and girls at MadCap support):

The correct way to use master pages in combination with google fonts and default stylesheets is as follows:

1. Set master style sheet for the project and the target to "default"
2. include a link to the default style sheet in the head of the master page
3. include a link to the google font in the head of the master page

However, there is a bug. The link to the google font contains a ? and a comma, Flare truncates this during build and so the font is actually not used in the final output and you get a "missing link" warning after the build is completed.

One work around for this bug is to uncheck "Replace reserved characters with underscores in filenames" and "Use lowercase filenames" in your target editor > Advanced tab. We are experiencing some problems with the publishing process when we do that, but I need to look into that some more. I'm just writing this to help other Flare users who run into similar issues when trying to use google fonts like open sans.
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
Ineffable
Sr. Propeller Head
Posts: 148
Joined: Mon Jan 15, 2007 3:08 pm
Location: Bay Area, CA

Re: Issues with Open Sans fonts?

Post by Ineffable »

Anyone run into issues where use of Google Fonts (Roboto, Roboto Condensed) works everywhere in the output except the TOC (i.e., Contents tab)?

To get it work, I edit the Styles.css (/Skins/Default/Stylesheets) in the output, adding this line to the top:

Code: Select all

@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto');
Of course, I don't want to do this every time I generate an output. I've scoured the skin editor and updated all font references to the Roboto font, to no avail.
chunkee
Sr. Propeller Head
Posts: 121
Joined: Wed Mar 09, 2011 1:52 pm

Re: Issues with Open Sans fonts?

Post by chunkee »

For some reason, I am unable to have the h1, h2, h3 styles display Source Sans Pro Semibold....IE displays it properly, but not Chrome, nor Firefox or Safari. I am not sure what is going on. Body, (Paragraph) styles render fine.

h1
{
font-family: 'Source Sans Pro Semibold', sans-serif;
width: 100%;
color: #e8671a;
font-size: 22pt;
padding-right: 10px;
padding-top: 5px;
margin-top: 0.5em;
margin-bottom: 0.5em;
padding-bottom: 10px;
line-height: 28px;

}

h2
{
font-family: 'Source Sans Pro Semibold', sans-serif;
color: #3c474b;
font-weight: normal;
font-size: 18pt;
}


In the Master Page I have the following:

<head>
<link href="../StyleSheets/insidePS.css" rel="stylesheet" MadCap:stylesheetType="text" />
<link href="../TableStyles/Simple.css" rel="stylesheet" MadCap:stylesheetType="table" />
<link href="http://fonts.googleapis.com/css?family= ... ro:400,600' rel='stylesheet' type='text/css" />
<link href="http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css" />
</head>

I have done the Simona settings, but still not getting it displayed properly.... Any suggestions?
Thank you.
John C
kwag_myers
Propellus Maximus
Posts: 810
Joined: Wed Jul 25, 2012 11:36 am
Location: Ann Arbor, MI

Re: Issues with Open Sans fonts?

Post by kwag_myers »

I'm bumping this thread because I'm having some issues with Google Fonts not displaying on a secured server (HTTPS). I'm using the following method, only I added the code to the CSS using NotePad and it carries through to the output.
Ineffable wrote:Anyone run into issues where use of Google Fonts (Roboto, Roboto Condensed) works everywhere in the output except the TOC (i.e., Contents tab)?

To get it work, I edit the Styles.css (/Skins/Default/Stylesheets) in the output, adding this line to the top:

Code: Select all

@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto');
Of course, I don't want to do this every time I generate an output. I've scoured the skin editor and updated all font references to the Roboto font, to no avail.
Removing the http: works, but I get this warning, "CSS: CSS: Missing imported CSS stylesheet file://fonts.googleapis.com/css?... Does this mean I have to do the @font-face thing in the CSS?
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Issues with Open Sans fonts?

Post by doc_guy »

You need to change the URL to be an https:// for your @import URL command in the CSS.

Google fonts supports both, but since you are on a secure page importing content from an insecure page, you get the warning. Change the URL in the @import line in the CSS to HTTPS and you should be fine.
Paul Pehrson
My Blog

Image
kwag_myers
Propellus Maximus
Posts: 810
Joined: Wed Jul 25, 2012 11:36 am
Location: Ann Arbor, MI

Re: Issues with Open Sans fonts?

Post by kwag_myers »

I thought about trying that and talked myself out of it, thinking, "No, that's the source and not the target." Anyway, works as advertised! Thanks.
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Issues with Open Sans fonts?

Post by doc_guy »

Yeah, the whole "source" vs. "target" depends on your perspective, and has messed me up more than once. :)
Paul Pehrson
My Blog

Image
Post Reply