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 …

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, …

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 alp…

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 …

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

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?

@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

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

@tim_1 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]

@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]

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');

CUSTOM FONT

Store Design

salina123 July 17, 2024, 2:06pm 5

Thank you @tim_1 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

Topic		Replies	Views
Why isn't my custom font displaying correctly on the Dawn 2.5.0 theme? Store Design	10	82	November 4, 2024
Multiple fonts in one line/heading Store Design css	8	174	June 26, 2024
How to italicize certain words in custom font titles? Store Design css	1	44	February 23, 2022
Stylized Headings Store Design landing-page , css	2	25	May 4, 2024
Shopify Dawn - Different custom font styles, same block? Store Design customizations , css , shopify-themes , troubleshooting , html	4	38	November 6, 2024

CUSTOM FONT

Related topics