CUSTOM FONT

[salina123]

Hi everyone,

I’m having trouble with my Shopify theme and custom fonts.
I’ve uploaded two custom fonts: GT ALPINA LIGHT and GT ALPINA LIGHT ITALIC.

When I try to italicize a word within a paragraph or title, it automatically applies a faux italic style instead of using the custom GT ALPINA LIGHT ITALIC font. How can I ensure that the custom italic style is applied correctly?

I want to italicize certain headings or specific words within a heading using HTML tags like <i>WORD  TO ITALICIZE</i>. What’s the best way to achieve this with my custom fonts?

My website is: www.didime.it

Thank you in advance for the support! 

[tim]

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, <p><i>...</i></p> will work as expected -- show italic, but <i><p>...</p></i> would not.
Also, <p style="font-style: italic"> ... </p> 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.

[salina123]

Thank you @tim looks very helpful. 

Where exactly do I need to insert this code to ensure the custom fonts are applied correctly? Any guidance would be greatly appreciated!

Thanks

[tim]

You already have CSS rules for @font-face but font-style property is missing there.

I'd remove existing @font-face and add the @font-face rules from my second snippet of code instead.

Then you'd need to modify your font-family lines to only reference 'gt alpina light'.

[salina123]

@tim it will work if I add those here? I can't find @font face in the theme liquid.

thank you!! 

[tim]

It may but you'd need to use actual URLs for font files because Custom CSS does not process liquid code like one used in 

src: url({{ 'GT-Alpina-Standard-Thin-Italic.otf' | file_url }}) format('opentype');

[salina123]

@tim sorry but I lost you :). I'm not too expert.
Where should I insert and replace the CSS you suggest? Do I need to update the liquid theme? I can't find the CSS rules for @font-face

thank you again! 

[tim]

Ah, I was under impression that you're adding these CSS rules yourself; 

Looks like you're using a section by @diego_ezfy (https://ezfycode.com/blog/add-custom-fonts-to-shopify) for this, should've mentioned this to start with.

In this case, you need to create two blocks with the same "Custom font name", but first one should have "Normal" selected for "Font style" and URL for normal font-file while the second block should have the same font name, "Italic" and URL for italic version of the font.

You need to leave checkboxes unchecked and CSS selectors empty on one of the blocks, no need for duplicate rules.

[polo_msweb]

Hi @salina123,

This is Polo from MS Wed Designer. 
I would love to assist you with your queries.

Please follow the below steps to secure files in the right format to be uploaded to the Assets as a new Asset.

Step 1:

Download the Font and convert it into .woff2 or .woff format.

Step 2:

Upload in the Asset Folder.

Step 3 :

Add some CSS Code in the base.css file at the bottom. which is written below 

If you are using the .woff format then use the below code 

@font-face {

 font-family: 'Proxima';

 src: url('Proxima Nova Font.woff') format('woff');  

 font-style: normal;
  }

tagname or .classname or #id{

 font-family: Proxima;

}

If you are using .woff2 format then use below code 

@font-face {

  font-family: 'Proxima';

  src: url('Proxima Nova Font.woff2') format('woff2');  

  font-style: normal;

  }

tagname or .classname or #id{

  font-family: Proxima;

}

If you have any doubt, please feel free to ask.

Regards
Polo

[Sweans]

Hi @salina123 ,

In custom css section of that particular section, use the css identifier (h2, p ) and apply font-style with important.

Example:

h2{
font-style: italic !important;
}

I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[salina123]

Thank you @Sweans but does this also work if I want to identify specific words? and how to identify that I want to apply the other custom font, the right italics?

[Sweans]

@salina123 
Can you mention how you have added the custom fonts to the theme?

Is it done by uploading as media files or to the assets folder of the theme?


If you need further assistance, feel free to reach out!
Regards,
Sweans

[salina123]

@Sweans I've followed a tutorial, I've added as a file and create a custom font section with a code.

[Sweans]

For most text sections you can select the desired text using mouse and click the italic button as shown in the picture below.

For sections where this option is not present, it is possible to write custom CSS to achieve the desired result. If you can share screenshots of the text you want to italicize, we will provide the code for

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[salina123]

Hi @Sweans 

The issue I'm encountering is that when I try to italicize a word within a paragraph or title using the method you suggested, it defaults to a faux italic style rather than applying the custom GT ALPINA LIGHT ITALIC font. How can I ensure that the custom italic style is applied correctly?

For example, if I want to italicize the word "collections" in this sentence with the correct typeface, how can I achieve that?

 

[Sweans]

Hi @salina123 ,

We have checked the font family 'GT ALPINA LIGHT ITALIC' by inspecting the elements and confirmed that the correct font family is being applied.

I hope this helps! If it does, please like it and mark it as a solution!   

If you need further assistance, feel free to reach out!

Regards,
Sweans