2 text questions

Backlight 4, 5 & 6 Support
#1

Consider this “credits” page: https://pideja.ca/galleries/05_quat-sous/04-hosanna/

Question 1 : why doesn’t the correct type face not appear on this page? I am using Josefin Sans, sans-serif, pulled from Google fonts. Although I did put it into the Base Font Properties, I also put it in the CSS as well.
Question 2: I can’t seem to get that date aligned center. In the CSS, I have this:

.date-line {
/* Styles for the date line at the bottom */
font-family: ‘Josefin Sans’, sans-serif;
margin-top: 15px;
font-size: 1.1em;
font-weight: 400;
text-align: center;
}

#2

It might be in the way you’re forming the url to the fonts in your css.See the TTG Google Fonts docs

you’re applying the class to the div. you may need to surround the text in the div with paragraph tags for the alignment to apply

#3

Hello Rod,

This edited CSS, at your suggestion, seems to do the trick:

 <div class="production-credits center-credit">
        <div id="main-copy-credits" class="credits-grid">
            <span class="role">Texte :</span><span class="name">MICHEL TREMBLAY</span>
            <span class="role">Mise en scène :</span><span class="name">LORRAINE PINTAL</span>
            <span class="role">Décor :</span><span class="name">DANIÈLE LÉVESQUE</span>
            <span class="role">Costumes :</span><span class="name">RICHARD LACROIX</span>
            <span class="role">Éclairages :</span><span class="name">ANDRÉ NAUD</span>
            <span class="role">Accessoires :</span><span class="name">JEAN-MARIE GUAY</span> </div>
  <div class="date-line"><p> <b>21 janvier - 16 février 1991</p> </b> 
</div>
    </div>

As for the type face, Iwas mistaken. The Josefin Sans font does appear correctly.
I am somewhat confused as to the way I implement it. Apart from inscribimg it in the BASE FONT PROPERTIES, I have it in the CSS all over the place. Isn’t this redundant? Anyway, it works.

Thank you.

#4

your html has errors. the <b>tag is deprecated (but still works, for now) and it’s not closed properly. It needs to be inside the <p> tag

#5

Got it. Edited the CSS code to look like this…

.date-line {
	/* Styles for the date line at the bottom */
	font-family: 'Josefin Sans', sans-serif;
	margin-top: 15px;
	font-size: 1.1em;
	font-weight: bold;
}

and the HTML…

 <div class="production-credits center-credit">
        <div id="main-copy-credits" class="credits-grid">
            <span class="role">Texte :</span><span class="name">MICHEL TREMBLAY</span>
            <span class="role">Mise en scène :</span><span class="name">LORRAINE PINTAL</span>
            <span class="role">Décor :</span><span class="name">DANIÈLE LÉVESQUE</span>
            <span class="role">Costumes :</span><span class="name">RICHARD LACROIX</span>
            <span class="role">Éclairages :</span><span class="name">ANDRÉ NAUD</span>
            <span class="role">Accessoires :</span><span class="name">JEAN-MARIE GUAY</span> </div>
       <div class="date-line"><p> 21 janvier - 16 février 1991</p>
                                      
</div>
    </div>
#6

Shouldn’t you load the font file with an absolute path?

src: url('fonts/JosefinSans-Regular.woff2') format('woff2'),

vs

src: url('/backlight/custom/fonts/JosefinSans-Regular.woff2') format('woff2'),
#7

Are you suggesting I use the bottom line rather than the top one?

#8

I suggest that you use something like the bottom line for all your font files since I think that your current code doesn’t properly point to the font files. I don’t know the location but my code assumes it’s in /backlight/custom/fonts, adjust as needed.

#9

Hello Daniel,
I am using Josefin_Sans/JosefinSans-Italic-VariableFont_wght.ttf as well as JosefinSans-VariableFont_wght.ttf In the backlight/custom/fonts folder.
It doesn’t seem the same way of describing the font.
So, I am trying this:

@font-face {
  font-family: 'Josefin Sans';
  src: url('/backlight/custom/fonts/JosefinSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; /* Define the range of available weights */
  font-style: normal; /* Define the style as normal (upright) */
}

@font-face {
  font-family: 'Josefin Sans';
 src: url('/backlight/custom/fonts/JosefinSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; /* Use the same weight range */
  font-style: italic; /* Define the style as italic */
}
.body {
	font-family: 'Josefin Sans', sans-serif;
}
#10

It looks like it works:

image
image2036×1126 231 KB

#11

Yeah!

Thanks, Rod & Daniel!

1 Like