One custom font with two files (regular and italic) not playing nicely together.

I added a custom font ("FooDisplay-Medium") and applied it to "H1", and it worked. When I then added an additional custom font (FooDisplay-MediumItalic) and applied to "H2", it broke the previous style, and now the H1 is italic. 

Same font family ("foo"). Two files. Is there a workaround? Has anyone tried this?

And I know I could simply add italic to the H2 custom style, but it's not really the same, as the italic font file would display correctly (not that anyone would notice).

Thx! 

----

 

// CUSTOM FONT for HEADING 1

@font-face {

font-family: 'foo';

src: url(https://static1.squarespace.com/static/63fe423ae838510284cc600a/t/64e931aeb04dfe430c64ba41/1693004206450/FooDisplay-Medium.otf);

}

h1 {

font-family: 'foo';

letter-spacing: normal;}

// CUSTOM FONT for HEADING 2

@font-face {

font-family: 'foo';

src: url(https://static1.squarespace.com/static/63fe423ae838510284cc600a/t/653d4ba84a828f0d57e00f5b/1698515880826/FooDisplay-MediumItalic.otf);

}

h2 {

font-family: 'foo';

letter-spacing: normal;}

Hi you need to name them different names. like below

// CUSTOM FONT for HEADING 1
@font-face {
	font-family: 'fooMedium'; // This is the name you give for this custom font. Rename as necessary
	src: url(https://static1.squarespace.com/static/63fe423ae838510284cc600a/t/64e931aeb04dfe430c64ba41/1693004206450/FooDisplay-Medium.otf);

}

// CUSTOM FONT for HEADING 2
@font-face {
	font-family: 'fooMediumItalic'; // This is the name you give for this custom font. Rename as necessary
	src: url(https://static1.squarespace.com/static/63fe423ae838510284cc600a/t/653d4ba84a828f0d57e00f5b/1698515880826/FooDisplay-MediumItalic.otf);

}

Then to set your h1 and h2 to use your custom fonts, you call them like this

h1 {
	font-family: 'fooMedium'; // put what font you want to use here
	letter-spacing: normal;
}

h2 {
	font-family: 'fooMediumItalic'; // put what font you want to use here
	letter-spacing: normal;}

If this has helped you out, let me know by marking as solution, or choose a reaction ----> 👇

Hmmm, unless I did something wrong, not sure that naming convention worked - H2 doesn't italicize. The font is Domaine (obviously!). Cheers though 🙂

// CUSTOM FONT H1

@font-face {

font-family: 'DomaineDisplay-Medium';

src: url(https://static1.squarespace.com/static/63fe423ae838510284cc600a/t/64e931aeb04dfe430c64ba41/1693004206450/DomaineDisplay-Medium.otf);

}

h1 {
font-family: 'DomaineDisplay-Medium';
letter-spacing: normal;}

// CUSTOM FONT H2

@font-face {

font-family: 'DomaineDisplay-MediumItalic';

src: url(https://static1.squarespace.com/static/63fe423ae838510284cc600a/t/64e931aeb04dfe430c64ba41/1693004206450/DomaineDisplay-MediumItalic.otf);

}

h2 {
font-family: 'DomaineDisplay-MediumItalic';
letter-spacing: normal;
}

Hi please share a link to your website so I can check. And tell me which text you are expecting to change to italics but is not. 

You're welcome