Debut theme - Custom Font

Strive
Tourist
5 0 1

Hello, 

I have gone through the community posts with no luck adding my custom font. I have multiple Gotham iterations I would like to add to the debut theme. 

Having converted the OTF into the other text files. I uploaded these assets and pasted the below code into my theme.css page under assets. 

 

@font-face {

    font-family: 'gothammedium';

    src: url(' {{ 'gothammedium.eot' | asset_url }} ');

    src: url(' {{ 'gothammedium.eot?#iefix' | asset_url }} ') format('embedded-opentype'),

    url(' {{ 'gothammedium.woff2' | asset_url }} ') format('woff2'),

    url(' {{ 'gothammedium.woff' | asset_url }} ') format('woff'),

    url(' {{ 'gothammedium.ttf' | asset_url }} ') format('truetype'),

    url(' {{ 'gothammedium.svg#gothammedium' | asset_url }} ') format('svg');

    font-weight: normal;

    font-style: normal;

}

 

There is no sign of the font in the customiser. 

 

Thanks, Phoebe

dmwwebartisan
Shopify Partner
6586 1536 2003

@Strive 

Please go through the following post. Hope this will help you.

https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
HardikDavra
Shopify Partner
2245 348 964

Hello, @Strive 

Welcome to the shopify Community.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

body {
font-family: 'gothammedium' !important;
}
PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Strive
Tourist
5 0 1

Hello, I cannot get gotham at all still. Can you please help?

 

Thank you

0 Likes
NgnLoop
Excursionist
33 4 25

Hi, upload font file in assests

Then add font face like that

@font-face {
  font-family: myFirstFont;
  src: url(fontName.woff);
}

And then add this code somewhere in css file

body, *{

font-family:myFirstFont  !important;

}

0 Likes