CUSTOM FONT

Store Design
, ,
2

There are 2 ways.

One is to define 2 independent font-families and set CSS rules to apply one or another. Similar to what you have now:

@font-face {
  font-family: 'gt alpina light';
  src: url({{'GT-Alpina-Standard-Thin.otf' | file_url }}) format('opentype');
}
@font-face {
  font-family: 'gt alpina light italic';
  src: url({{ 'GT-Alpina-Standard-Thin-Italic.otf' | file_url }}) format('opentype');
}
p {
  font-family: 'gt alpina light';
}
i {
  font-family: 'gt alpina light italic';
}

This will work, but sometimes it will not.
Say,

…

will work as expected – show italic, but

…

 would not.
Also,

…

would show normal font too.

That’s why it would be better to define one font-family with 2 styles:

@font-face {
  font-family: 'gt alpina light';
  src: url({{'GT-Alpina-Standard-Thin.otf' | file_url }}) format('opentype');
  font-style: normal;
}

@font-face {
  font-family: 'gt alpina light';
  src: url({{ 'GT-Alpina-Standard-Thin-Italic.otf' | file_url }}) format('opentype');
  font-style: italic;
}

p {
  font-family: 'gt alpina light';
}

In this case all 3 examples from above will show proper italic font as browser will apply relevant font variation automatically since you’re giving it a bit more information.