How to use Google Fonts

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
ClaireDT
Jr. Propeller Head
Posts: 9
Joined: Wed Sep 24, 2014 1:23 am

How to use Google Fonts

Post by ClaireDT »

Hi

I'm trying to use Google Fonts but I can't seem to make it work. I've put the link to the Google font in the master page, and linked the master page to the target in Target|Advanced, but it is not showing up in the final output.

This is the code I'm using in the master page

Code: Select all

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
But when I publish and then view source, the link above is not in the links that appear on the actual published page.

Am I missing something? What is driving where the links appear in the published page?

C.
Top
NorthEast
Master Propellus Maximus
Posts: 6426
Joined: Mon Mar 05, 2007 8:33 am

Re: How to use Google Fonts

Post by NorthEast »

Firstly, the code is invalid - your example is HTML, but Flare uses XHTML, so the end of the link tag needs to be closed.

Code: Select all

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css' />
Stylesheet links will be removed from output topics if you have set a master stylesheet in either your target properties or project properties.
You'll need to set the master stylesheet to (Default), to get that link to appear in the output.
Top
ClaireDT
Jr. Propeller Head
Posts: 9
Joined: Wed Sep 24, 2014 1:23 am

Re: How to use Google Fonts

Post by ClaireDT »

Thanks, Dave, but that doesn't seem to have fixed it either.

Here's my head from my master page:

Code: Select all

 <head>
        <link href="../TableStyles/LibraryFooter.css" rel="stylesheet" MadCap:stylesheetType="table" />
        <link href="../Stylesheets/styles.css" rel="stylesheet" type="text/css" />
		<link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css"/>
					<script>
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

			ga('create', 'UA-56825100-1', 'auto');
			ga('send', 'pageview');

		</script>
    </head>
And here's the head when I publish:

Code: Select all

 <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" /><title></title>
        <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" />
        <script type="text/javascript" src="Resources/Scripts/custom.modernizr.js">
        </script>
        <script type="text/javascript" src="Resources/Scripts/jquery.min.js">
        </script>
        <script type="text/javascript" src="Resources/Scripts/foundation.min.js">
        </script>
        <script type="text/javascript" src="Resources/Scripts/plugins.min.js">
        </script>
        <script type="text/javascript" src="Resources/Scripts/require.min.js">
        </script>
        <script type="text/javascript" src="Resources/Scripts/require.config.js">
        </script>
        <script type="text/javascript" src="Resources/Scripts/MadCapAll.js">
        </script>
        <script src="Skins/Default/Scripts/Toolbar.js">
        </script>
    </head>
I've looked at my project properties and the master stylesheet is set to default, and the same is true on the target | general.

As you can see, I'm not getting the links from the master page appear in the output at all.

Any other ideas?
Top
Nita Beck
Senior Propellus Maximus
Posts: 3672
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: How to use Google Fonts

Post by Nita Beck »

What about using the @import method to link your stylesheet to the Google font:

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
I've used this technique with some of my projects that use Google fonts and it seems to work fine.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Top
NorthEast
Master Propellus Maximus
Posts: 6426
Joined: Mon Mar 05, 2007 8:33 am

Re: How to use Google Fonts

Post by NorthEast »

ClaireDT wrote:And here's the head when I publish:
As you can see, I'm not getting the links from the master page appear in the output at all.

Any other ideas?
That is the head section from the root output file Default.htm.

The master page is applied to the topic files only; if you look in the head section of a topic, you'll see your link.
Top
ClaireDT
Jr. Propeller Head
Posts: 9
Joined: Wed Sep 24, 2014 1:23 am

Re: How to use Google Fonts

Post by ClaireDT »

That is the head section from the root output file Default.htm.

The master page is applied to the topic files only; if you look in the head section of a topic, you'll see your link.
Can I access Default.htm to add it?

No matter where on the published output I look at the page source I cannot see the link that I put in the master page head. I'm right clicking on the topic title and viewing source and it is the same as if I click on the logo at the top.

Never mind - found it - it was view frame source. The Google analytics code is working.

The font issue was fixed using @font-face. If you google 'use @font-face with Google fonts' you'll see exactly how to do it.
Last edited by ClaireDT on Wed Nov 19, 2014 5:42 am, edited 1 time in total.
Top
ClaireDT
Jr. Propeller Head
Posts: 9
Joined: Wed Sep 24, 2014 1:23 am

Re: How to use Google Fonts

Post by ClaireDT »

Nita Beck wrote:What about using the @import method to link your stylesheet to the Google font:

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
I've used this technique with some of my projects that use Google fonts and it seems to work fine.
Hi

I've actually fixed the font issue by using @font-face in the main CSS file, which has worked. Very similar to what you suggested, so thanks.

I'm now focused on trying to get the Google analytics code to appear now.
Top
Post Reply

Return to “Styles, Stylesheets and XML”