Custom Font for use in one specific title

Solved

Custom Font for use in one specific title

UPDG
Tourist
9 1 0

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;
}

UPDG_0-1720472604713.png

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!

Accepted Solution (1)

UPDG
Tourist
9 1 0

This is an 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>

View solution in original post

Replies 2 (2)

UPDG
Tourist
9 1 0

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_0-1720543768850.png

UPDG
Tourist
9 1 0

This is an 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>