CODEWITHSUNDEEP
xmlxsltgoogle-font-apigoogle-search-appliance
megseoh
megseoh

Reputation: 11

Add Google Font to <head> in XSLT

I'm using Google Search Appliance to filter search results & the page is written in XSLT. I'd like to link to Google fonts in the <head> but have not been able to manage.

HTML:

<head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
</head>

XSL I've tried:

<xsl:template name="addOpenSansStart">
  <xsl:text disable-output-escaping="yes">&lt;head&gt;</xsl:text>
  <xsl:element name="link">
    <xsl:attribute name="href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600'">href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600'</xsl:attribute>
    <xsl:attribute name="rel='stylesheet'">rel='stylesheet'</xsl:attribute>
    <xsl:attribute name="type='text/css'">type='text/css'</xsl:attribute>
</xsl:element>
</xsl:template>
<xsl:template name="addOpenSansEnd">
  <xsl:text disable-output-escaping="yes">&lt;/head&gt;</xsl:text>
  <xsl:text>
  </xsl:text>
</xsl:template>

Also:

<xsl:template name="addOpenSansStart">
  <xsl:text disable-output-escaping="yes">&lt;head&gt;</xsl:text>
  <xsl:text disable-output-escaping="yes">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css' /&gt;</xsl:text>
</xsl:template>
<xsl:template name="addOpenSansEnd">
  <xsl:text disable-output-escaping="yes">&lt;/head&gt;</xsl:text>
  <xsl:text>
  </xsl:text>
</xsl:template>

Both gave me ERRORS The element type "link" must be terminated by the matching end-tag "</link>".

Upvotes: 1

Views: 3135

Answers (1)

kjhughes
kjhughes

Reputation: 111726

You'll be happy to learn that you can simply include the literal markup to be generated:

<xsl:template name="addOpenSansStart">
  <head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' 
          rel='stylesheet' type='text/css'/>
  </head>
  <!-- the rest of your template -->
</xsl:template>

Should you ever actually need to use xsl:element and xsl:attribute, realize that the name attribute should not include the value of the attribute too:

<xsl:template name="addOpenSansStart">
  <head>
    <xsl:element name="link">
      <xsl:attribute name="href">https://fonts.googleapis.com/css?family=Open+Sans:400,300,600</xsl:attribute>
      <xsl:attribute name="rel">stylesheet</xsl:attribute>
      <xsl:attribute name="type">text/css</xsl:attribute>
    </xsl:element>
  </head>
  <!-- the rest of your template -->
</xsl:template>

Either way should work for you.

Note that, if you need to add the preconnect links often used when adding Google Fonts, or if you want to import multiple fonts, you will need to edit those to ensure they are valid XHTML/XML by:

  1. Replacing any ampersands, "&", with "&amp;"
  2. Adding an equals sign followed by two double quotes after "crossorigin"
  3. Adding trailing slashes to the end of all self-closing link elements

For example, the following HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&family=Raleway:wght@400&display=swap" rel="stylesheet">

Would need to be converted to:

<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&amp;family=Raleway:wght@400&amp;display=swap" rel="stylesheet"/>

Upvotes: 2

Related Questions