Menu icon Foundation
Zurb Email Stack: Panini templating skipping font declarations on in-page variables on iOS devices

Note: I'm using the most recent Zurb Stack for this project.

I've got a master template for an email which utilizes in-page variables that are initialized within the page's front matter in accordance with the [Panini docs](http://foundation.zurb.com/sites/docs/panini.html). 

The issue is occurring in the "Class Topics" section of this email template. 

All the variable data is being inserted from the front matter correctly; however, I've noticed that one of them consistently doesn't get its font correctly defined according to my SCSS. This seems to only occur on iOS devices. Other clients are not affected. 

A few litmus test results  (Note the device names at the top of each image.)

The results on the iOS devices display one of the items in the `$body-font-family` font instead of the family I have declared in app.scss. 

Similar results occur when I was using Panini's `<#each item>` method to insert the variables. 

Below are  my Inky markup and SCSS files. I've individually declared the font's for classes to make sure this wasn't a SCSS compilation issue. 

index.html

// index.html

---

classdate: September 13-15, 2016

classtitle: removed

classlocation: Seattle, WA

classtimes: 8am - 5pm

classurl: removed

instructors: removed

instructorcompany: removed

classjustification: If you crave an intense dose of insider LDAR knowledge from various industry perspectives, this session is for you. LDAR for Experts is for the seasoned LDAR coordinator seeking advanced LDAR training. Other professionals who might attend include environmental advisors, maintenance supervisors with continuing LDAR responsibilities, contractor site supervisors, and program managers.

benefit1: Firsthand insight on LDAR regulations, enforcement initiatives, and sticky issues from various industry perspectives

benefit2: Cutting edge best management practices for your LDAR program and audits

benefit3: Techniques for implementing robust leak detection programs

benefit4: An understanding of the newest LDAR developments, including AWP, GHG impacts on LDAR, and the high-flow sampler

benefit5: The know-how to optimize and manage a sustainable LDAR compliance program

instructorinfo: has more than 23 years experience in the environmental field focused on air quality compliance in the refining, petrochemical, and natural gas processing industries. His core experience in the implementation and operation of fugitive emission source Leak Detection and Repair (LDAR) programs. In  22 years as an LDAR contractor he has held the following positions relating to LDAR; Monitoring Technician, Lead Technician, Inventory Technician, Environmental Monitoring Site Supervisor, Local Project Manager, Regional Project Manager, Regulatory Compliance and Quality Control Manager and the executive title Director of Quality Control and Training. 

---

<wrapper class="headlineRow">

  <center>

    <container>

      <row class="headlineRow">

        <columns small="12" large="12">

          <spacer size="30"></spacer>

          <h6 class="dateLocationText text-center">

            {{ classdate }}

          </h6>

          <h1 class="classTitle text-center"> 

            <a href="{{ classurl }}">

              {{ classtitle }}

            </a>

          </h1>

          <h6 class="dateLocationText text-center">

            {{ classlocation }} / <font color="#000000">{{ classtimes }}</font>

          </h6>

        </columns>

      </row>

      <row class="headlineRow">

        <columns small="12" large="12">

          <h6 class="headlineInstructorText text-center">

            Instructors: {{ instructors }}

            <br>

            {{ instructorcompany }}

          </h6>

        </columns>

      </row>

      <row class="headlineRow">

        <columns small="12" large="12">

          {{>cta}}

        </columns>

      </row>

    </container>

  </center>

</wrapper>

 

<container>

  <row class="bodyRow">

    <columns small="12" large="12">

      <spacer size="30"></spacer>

      <h5 class="bodyJustification text-center">

        {{ classjustification }}

      </h5>

      <spacer size="10"></spacer>

    </columns>

  </row>

  <row class="bodyRow">

    <columns small="12" large="12">

      <h6 class="benefitsHeadingText">

        Class Topics:

      </h6>

    </columns>

  </row>

  <row class="bodyRow">

    <columns small="12" large="12">

      <center>

          <h6 class="benefits text-center">

            {{ benefit1 }}

          </h6>

          <h6 class="benefits text-center">

            {{ benefit2 }}

          </h6>

          <h6 class="benefits text-center">

            {{ benefit3 }}

          </h6>

          <h6 class="benefits text-center">

            {{ benefit4 }}

          </h6>

          <h6 class="benefits text-center">

            {{ benefit5 }}

          </h6>

      </center>

    </columns>

  </row>

  <row class="bodyRow">

    <columns small="12" large="12">

        <spacer size="10"></spacer>

        <h4 class="instructorHeading text-center">

          Learn from the BEST

        </h4>

        <h6 class="instructorBio text-center">

          {{ instructorinfo }}

        </h6>

    </columns>

  </row>

  <row class="bodyRow">

    <columns small="12" large="12">

      {{>cta}}

    </columns>

  </row>

</container>

 

 

app.scss

@import 'settings';

@import 'foundation-emails';

 

$hse-yellow: #FFE72D;

$hse-orange: #F26350;

$hse-footer-text: #bfad22;

 

// Header

.headerRow {

background-color: $black;

 

.headerInner {

background-color: $black;

}

 

.brandTextLink {

color: $hse-yellow;

font-weight: 100;

text-decoration: underline;

}

}

 

// Headline Section

.headlineRow {

background-color: $hse-yellow;

 

.dateLocationText {

font-family: Georgia, Times, "Times New Roman", serif;

color: $black;

font-weight: bold;

font-style: italic;

}

.classTitle {

color: $hse-orange;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: bold;

text-transform: uppercase;

 

a {

color: $hse-orange;

text-decoration: underline;

}

}

.headlineInstructorText {

color: $hse-orange;

font-family: Georgia, Times, "Times New Roman", serif;

font-style: italic;

}

 

}

 

// Body

.bodyRow {

background-color: $white;

 

.bodyJustification {

color: $hse-orange;

font-family: Georgia, Times, "Times New Roman", serif;

}

 

.benefitsHeadingText {

color: $black;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: bold;

text-transform: uppercase;

text-align: center;

}

 

.benefits {

color: $dark-gray;

font-family: Georgia, Times, "Times New Roman", serif;

text-align: center;

}

.instructorHeading {

color: $hse-orange;

font-family: Georgia, Times, "Times New Roman", serif;

font-style: italic;

margin-bottom: 0;

}

.instructorBio {

color: $dark-gray;

font-weight: 100;

font-family: Georgia, Times, "Times New Roman", serif;

}

}

 

 

// Footer

.footerRow {

background-color: $hse-yellow;

 

.footerText {

color: $hse-footer-text;

font-size: .7em;

 

a {

color: $hse-footer-text;

text-decoration: underline;

}

}

}

Apologies for the non-abbreviated code, but I want to make sure this issue isn't being caused by something else in the markup.  

 

 

emailzurb stackpaninitemplatingfont-faceHandlebars

Note: I'm using the most recent Zurb Stack for this project.

I've got a master template for an email which utilizes in-page variables that are initialized within the page's front matter in accordance with the [Panini docs](http://foundation.zurb.com/sites/docs/panini.html). 

The issue is occurring in the "Class Topics" section of this email template. 

All the variable data is being inserted from the front matter correctly; however, I've noticed that one of them consistently doesn't get its font correctly defined according to my SCSS. This seems to only occur on iOS devices. Other clients are not affected. 

A few litmus test results  (Note the device names at the top of each image.)

The results on the iOS devices display one of the items in the `$body-font-family` font instead of the family I have declared in app.scss. 

Similar results occur when I was using Panini's `<#each item>` method to insert the variables. 

Below are  my Inky markup and SCSS files. I've individually declared the font's for classes to make sure this wasn't a SCSS compilation issue. 

index.html

// index.html

---

classdate: September 13-15, 2016

classtitle: removed

classlocation: Seattle, WA

classtimes: 8am - 5pm

classurl: removed

instructors: removed

instructorcompany: removed

classjustification: If you crave an intense dose of insider LDAR knowledge from various industry perspectives, this session is for you. LDAR for Experts is for the seasoned LDAR coordinator seeking advanced LDAR training. Other professionals who might attend include environmental advisors, maintenance supervisors with continuing LDAR responsibilities, contractor site supervisors, and program managers.

benefit1: Firsthand insight on LDAR regulations, enforcement initiatives, and sticky issues from various industry perspectives

benefit2: Cutting edge best management practices for your LDAR program and audits

benefit3: Techniques for implementing robust leak detection programs

benefit4: An understanding of the newest LDAR developments, including AWP, GHG impacts on LDAR, and the high-flow sampler

benefit5: The know-how to optimize and manage a sustainable LDAR compliance program

instructorinfo: has more than 23 years experience in the environmental field focused on air quality compliance in the refining, petrochemical, and natural gas processing industries. His core experience in the implementation and operation of fugitive emission source Leak Detection and Repair (LDAR) programs. In  22 years as an LDAR contractor he has held the following positions relating to LDAR; Monitoring Technician, Lead Technician, Inventory Technician, Environmental Monitoring Site Supervisor, Local Project Manager, Regional Project Manager, Regulatory Compliance and Quality Control Manager and the executive title Director of Quality Control and Training. 

---

<wrapper class="headlineRow">

  <center>

    <container>

      <row class="headlineRow">

        <columns small="12" large="12">

          <spacer size="30"></spacer>

          <h6 class="dateLocationText text-center">

            {{ classdate }}

          </h6>

          <h1 class="classTitle text-center"> 

            <a href="{{ classurl }}">

              {{ classtitle }}

            </a>

          </h1>

          <h6 class="dateLocationText text-center">

            {{ classlocation }} / <font color="#000000">{{ classtimes }}</font>

          </h6>

        </columns>

      </row>

      <row class="headlineRow">

        <columns small="12" large="12">

          <h6 class="headlineInstructorText text-center">

            Instructors: {{ instructors }}

            <br>

            {{ instructorcompany }}

          </h6>

        </columns>

      </row>

      <row class="headlineRow">

        <columns small="12" large="12">

          {{>cta}}

        </columns>

      </row>

    </container>

  </center>

</wrapper>

 

<container>

  <row class="bodyRow">

    <columns small="12" large="12">

      <spacer size="30"></spacer>

      <h5 class="bodyJustification text-center">

        {{ classjustification }}

      </h5>

      <spacer size="10"></spacer>

    </columns>

  </row>

  <row class="bodyRow">

    <columns small="12" large="12">

      <h6 class="benefitsHeadingText">

        Class Topics:

      </h6>

    </columns>

  </row>

  <row class="bodyRow">

    <columns small="12" large="12">

      <center>

          <h6 class="benefits text-center">

            {{ benefit1 }}

          </h6>

          <h6 class="benefits text-center">

            {{ benefit2 }}

          </h6>

          <h6 class="benefits text-center">

            {{ benefit3 }}

          </h6>

          <h6 class="benefits text-center">

            {{ benefit4 }}

          </h6>

          <h6 class="benefits text-center">

            {{ benefit5 }}

          </h6>

      </center>

    </columns>

  </row>

  <row class="bodyRow">

    <columns small="12" large="12">

        <spacer size="10"></spacer>

        <h4 class="instructorHeading text-center">

          Learn from the BEST

        </h4>

        <h6 class="instructorBio text-center">

          {{ instructorinfo }}

        </h6>

    </columns>

  </row>

  <row class="bodyRow">

    <columns small="12" large="12">

      {{>cta}}

    </columns>

  </row>

</container>

 

 

app.scss

@import 'settings';

@import 'foundation-emails';

 

$hse-yellow: #FFE72D;

$hse-orange: #F26350;

$hse-footer-text: #bfad22;

 

// Header

.headerRow {

background-color: $black;

 

.headerInner {

background-color: $black;

}

 

.brandTextLink {

color: $hse-yellow;

font-weight: 100;

text-decoration: underline;

}

}

 

// Headline Section

.headlineRow {

background-color: $hse-yellow;

 

.dateLocationText {

font-family: Georgia, Times, "Times New Roman", serif;

color: $black;

font-weight: bold;

font-style: italic;

}

.classTitle {

color: $hse-orange;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: bold;

text-transform: uppercase;

 

a {

color: $hse-orange;

text-decoration: underline;

}

}

.headlineInstructorText {

color: $hse-orange;

font-family: Georgia, Times, "Times New Roman", serif;

font-style: italic;

}

 

}

 

// Body

.bodyRow {

background-color: $white;

 

.bodyJustification {

color: $hse-orange;

font-family: Georgia, Times, "Times New Roman", serif;

}

 

.benefitsHeadingText {

color: $black;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: bold;

text-transform: uppercase;

text-align: center;

}

 

.benefits {

color: $dark-gray;

font-family: Georgia, Times, "Times New Roman", serif;

text-align: center;

}

.instructorHeading {

color: $hse-orange;

font-family: Georgia, Times, "Times New Roman", serif;

font-style: italic;

margin-bottom: 0;

}

.instructorBio {

color: $dark-gray;

font-weight: 100;

font-family: Georgia, Times, "Times New Roman", serif;

}

}

 

 

// Footer

.footerRow {

background-color: $hse-yellow;

 

.footerText {

color: $hse-footer-text;

font-size: .7em;

 

a {

color: $hse-footer-text;

text-decoration: underline;

}

}

}

Apologies for the non-abbreviated code, but I want to make sure this issue isn't being caused by something else in the markup.  

 

 

Corey Schaaf about 3 years ago

Without knowing what the expected rendering is: 

I'm assuming your saying the font choice for the title "Class Topics" is incorrect and that it should match what you have as the title for "Learn from the Best"

If that's the case, the class you have on the : 

.benefitsHeadingText {
    color: $black;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

Whereas the font you are calling for the Instructor Heading "Learn from the Best" using a different class and a different font.  (Notice Georgia is listed below) where has it is ommitted from the class .benefitHeadingText above. 

.instructorHeading {
    color: $hse-orange;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-style: italic;
    margin-bottom: 0;
}

Adding the font reference to the .benefitsHeadingText solved the issue for the font rendering for me. 

 

 

 

 

 

Stephen Rust about 3 years ago

Hi Corey, and thanks for the reply. 

 

My issue is actually occurring in this section of the template:

<row class="bodyRow">
    <columns small="12" large="12">
      <center>
          <h6 class="benefits text-center">
            {{ benefit1 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit2 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit3 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit4 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit5 }}
          </h6>
      </center>
    </columns>
  </row>

You'll notice in the screenshots of the Litmus test I provided that the {{ benefit2 }} didn't receive the proper font assignment on iOS clients, while the other {{ benefits }} did. Not sure why that's occurring... 

On Outlook clients, the elements in this section are formatted correctly. This is Outlook 2007:

 

But on iOS devices, not all those elements get the right font assignments. Here's a screenshot from the iPhone 6 render: 

 

While I could insert the benefit content manually, I'd like to leverage Panini and Handlebars to automate the production of lots of these types of emails at once. 

 

Corey Schaaf about 3 years ago

When using panini, be careful about quotation marks. Question marks and punctuation. Front matter is great, but I've noticed that sometimes pannini errors out which causes issues elsewhere. I'll take a look and see what I can find. 

To troubleshoot, I would re-assign the content from handelbars to a different variable and see if the same problem occurs. If it does, than maybe there's some punctuation that's throwing off paninni. 

Stephen Rust about 3 years ago

Thanks, Corey. I'll re-assign the {{ benefits }} variables, and remove punctuation from the front-matter blocks to see if that makes a difference. 

I also edited my previous post with screenshots of the issue occurring. 

Stephen Rust about 3 years ago

After a bunch of tests, I've come to the conclusion that there must've been some strange character in that one affected line causing the error. When that particular variable is removed, all the lines are rendered correctly. 

Corey Schaaf about 3 years ago

you might try wrapping the <<raw>> content you don't wank the inky inliner to modify <</raw>> - I'm not sure how those tags will behave in paninni but i know others have had success with this. You might just need to modify the tags. 

Just do a google search for Foundation For Emails <<raw>> panini and you'll find that this approach is in development on git. 

Stephen Rust about 3 years ago

It looks like I was able to eliminate the issue by removing font-families with quotes from my SCSS. 

For example:

.oldClass {
   font-family: Georgia, "Times New Roman", Times, serif;
}

.newClass {
   font-family: Georgia, Times, serif;
}


   

I've experienced this issue with font-declarations with quotes before with the Zurb Email Stack. Have you?