Custom Font for use in one specific title

[UPDG]

Hi, 

I've poured over the many Q/A's on this topic but unfortunately, I still can't get the Sofachrome custom font to work on one specific title on our home page! I purchased the Sofachrome font and converted the ttf files to woff and woff2. Then, I tried two methods to upload it in our Dawn theme, first as an asset and then as a file.

Method 1: Uploaded fonts to the Content--> Files. This is the file method with the following at the bottom of the base.css. I also tried using the full file-path for the url.

/* Custom Fonts */
@font-face {
     font-family: 'Sofachrome';
     src: url('{{ 'SofachromeBk-Regular.woff2' |  file_url }}') format('woff2'),
             url('{{ 'SofachromeBk-Regular.woff' | file_url }}') format('woff');
    font-style: normal;
    font-weight: normal;
}

Method 2: uploaded the woff files as assets with the following at the bottom of the base.css

/* Custom Fonts */
@font-face {
     font-family: 'Sofachrome';
     src: url('{{ 'SofachromeBk-Regular.woff2' |  asset_url }}') format('woff2'),
             url('{{ 'SofachromeBk-Regular.woff' | asset_url }}') format('woff');
    font-style: normal;
    font-weight: normal;
}

Neither method seems to work. I am trying to apply the Sofachrome font to just one element, a title on our home page.

Looking at the title on our website in developer mode the console shows Elements-->Computed-->font-family: sofachrome, sans-serif. I assume this means that the font is at least loading and should be accessible, but the title is showing in sans-serif, the backup font.

The title element: <h2 id="SectionHeading-template--17898800775381__1f658fce-450c-44ab-973c-cc80e8c70a15" class="collection-list-title inline-richtext h1">TITLE of PAGE</h2>

I apply the Sofachrome font with the following css:

#SectionHeading-template--17898800775381__1f658fce-450c-44ab-973c-cc80e8c70a15 {
font-family: "Sofachrome", sans-serif !important;
}

I've tried to target just the .collection-list-title but that doesn't work either! Any assistance would be greatly appreciated! Thanks so much!

[UPDG]

Update: Elsewhere in the Shopify Discussions it has been mentioned that the @font-face should go in a separate .css.liquid file, not in a .css file. I created a custom-fonts.css.liquid file and linked the file in the theme.liquid:

custom-fonts.css.liquid contains:

@font-face {
font-family: 'Sofachrome';
src: url('{{ 'SofachromeBk-Regular.woff2' | asset_url }}') format('woff2'),
url('{{ 'SofachromeBk-Regular.woff' | asset_url }}') format('woff');
font-style: normal;
font-weight: normal;

}

theme.liquid contains:

<link rel="stylesheet" href="{{ 'custom-fonts.css.liquid' | asset_url }}">

Still doesn't work though!! The font appears to be loading but it's not applying to the title element 😞

[UPDG · Accepted solution]

I finally found the solution to loading and using custom fonts. The solution was posted by Edgywebsites:  the latest Shopify web code editor is buggy and uploads the files as text (ASCII) instead of binary, which corrupts the file. So you need to upload it using Shopify Themekit. If you're unaware or don't use Themekit, Simply upload the font files by going to settings > files.

I followed Edgywebsite's advice, then defined the font-face and it worked!! Woohooo!

<style>

@font-face {

font-family: "SofachromeRg-Regular";

src: url("{{ 'SofachromeRg-Regular.ttf' | file_url }}") format("truetype"),

url("{{ 'SofachromeRg-Regular.woff' | file_url }}") format("woff"),

url("{{ 'SofachromeRg-Regular.woff2' | file_url }}") format("woff2");

font-style: normal;

font-weight: normal;

}

</style>

[BoldBotanicals]

Hi there!

I'm hoping you can help me as I am tearing my hair out with this same issue! I followed your instructions but it doesn't work on my end 😞

I added my font files to Content > Files and then added the @font-face code block at the end of my base.css file, per your instructions. And still nothing!

 

 I've targeted both the Shopify section ID and the class where the H2 is and it shows the font when I inspect, but doesn't show on the page itself.

 

Any help or guidance would be greatly appreciated.

[BoldBotanicals]

Ah! Fixed the issue! This method worked for me 🙂

Thanks for your post. Led me down the right path. 👍