Issues with Open Sans fonts?
-
- Propeller Head
- Posts: 32
- Joined: Sat Feb 08, 2014 11:58 am
Issues with Open Sans fonts?
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?
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?
-
- Senior Propellus Maximus
- Posts: 3667
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Issues with Open Sans fonts?
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.
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
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Propeller Head
- Posts: 32
- Joined: Sat Feb 08, 2014 11:58 am
Re: Issues with Open Sans fonts?
Did you install True Type fonts in Windows?
What if anything did you have to do in Flare to cause Open fonts to display?
What if anything did you have to do in Flare to cause Open fonts to display?
-
- Senior Propellus Maximus
- Posts: 3667
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Issues with Open Sans fonts?
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.
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
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Propeller Head
- Posts: 32
- Joined: Sat Feb 08, 2014 11:58 am
Re: Issues with Open Sans fonts?
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.
Re: Issues with Open Sans fonts?
If I may chime in here... I have a related n00b question...
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" />?
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
TechWriter with 10+ years Flare experience (software)
99% remote
Re: Issues with Open Sans fonts?
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.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
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
Re: Issues with Open Sans fonts?
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
TechWriter with 10+ years Flare experience (software)
99% remote
Re: Issues with Open Sans fonts?
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.
Re: Issues with Open Sans fonts?
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.
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
TechWriter with 10+ years Flare experience (software)
99% remote
Re: Issues with Open Sans fonts?
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.
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.
Re: Issues with Open Sans fonts?
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?
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
TechWriter with 10+ years Flare experience (software)
99% remote
Re: Issues with Open Sans fonts?
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:
and in the stylesheet:
And remember do not set a master stylesheet anywhere.
You get 'missing linked stylesheet' warnings in the build, but it works fine.
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>
Code: Select all
body
{
font-family: 'Lobster';
}
You get 'missing linked stylesheet' warnings in the build, but it works fine.
Re: Issues with Open Sans fonts?
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
TechWriter with 10+ years Flare experience (software)
99% remote
Re: Issues with Open Sans fonts?
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.
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
TechWriter with 10+ years Flare experience (software)
99% remote
Re: Issues with Open Sans fonts?
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:
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.
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');
Re: Issues with Open Sans fonts?
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
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
-
- Propellus Maximus
- Posts: 810
- Joined: Wed Jul 25, 2012 11:36 am
- Location: Ann Arbor, MI
Re: Issues with Open Sans fonts?
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.
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?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:
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.Code: Select all
@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto');
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Issues with Open Sans fonts?
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.
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.
-
- Propellus Maximus
- Posts: 810
- Joined: Wed Jul 25, 2012 11:36 am
- Location: Ann Arbor, MI
Re: Issues with Open Sans fonts?
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
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Issues with Open Sans fonts?
Yeah, the whole "source" vs. "target" depends on your perspective, and has messed me up more than once.