Re: CUSTOM FONT

CUSTOM FONT

salina123
New Member
18 0 0

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! 

Replies 15 (15)

tim
Shopify Partner
3852 377 1412

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]
salina123
New Member
18 0 0

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
Shopify Partner
3852 377 1412

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'.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]
salina123
New Member
18 0 0

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

thank you!! 

Screenshot 2024-07-18 at 11.50.52.png

tim
Shopify Partner
3852 377 1412

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');
If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]
salina123
New Member
18 0 0

@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
Shopify Partner
3852 377 1412

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.

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]

polo_msweb
Shopify Partner
18 1 4

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Speed Optimization and Any Custom Shopify tasks
email: [email protected]
Download Free Shopify Speed Optimization Guide book for 2024 

Sweans
Shopify Partner
418 84 125

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at [email protected] regarding any help.
- To know more about me check out www.sweans.com

salina123
New Member
18 0 0

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
Shopify Partner
418 84 125

@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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at [email protected] regarding any help.
- To know more about me check out www.sweans.com

salina123
New Member
18 0 0

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

Screenshot 2024-07-18 at 11.53.02.png

Sweans
Shopify Partner
418 84 125

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

 

Sweans_0-1721306217900.png

 


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


Sweans_1-1721306276390.png


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

 

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at [email protected] regarding any help.
- To know more about me check out www.sweans.com

salina123
New Member
18 0 0

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?

 

Screenshot 2024-08-02 at 12.12.52.png

Sweans
Shopify Partner
418 84 125

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.

Sweans_0-1722602474320.png

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at [email protected] regarding any help.
- To know more about me check out www.sweans.com