CODEWITHSUNDEEP
csswordpressfontswebfonts
David
David

Reputation: 57

WP OnePress custom font

I am trying to set "not included" font to OnePress template. I tried plugins and etc. but it doesn't work. Same with CSS. For example, I used this:


     @import url("https://use.typekit.net/zni3ajm.css");

    body, body p { 
        font-family: century-gothic,    sans-serif;
        font-weight: 400;
        font-style: normal;
     } 
     #page .site-branding .site-title, #page .site-branding .site-text-logo { 
        font-family: century-gothic,    sans-serif;
        font-weight: 400;
        font-style: normal;
     } 
     #page .site-branding .site-description { 
        font-family: century-gothic,    sans-serif;
        font-weight: 400;
        font-style: normal;
     } 
     .onepress-menu a { 
        font-family: century-gothic,    sans-serif;
        font-weight: 400;
        font-style: normal;
     } 
     .hero__content .hero-large-text, .hero__content .hcl2-content h1, .hero__content .hcl2-content h2, .hero__content .hcl2-content h3 { 
        font-family: century-gothic,    sans-serif;
        font-weight: 400;
        font-style: normal;
     } 
     body h1, body h2, body h3, body h4, body h5, body h6,
        .entry-header .entry-title,
        body .section-title-area .section-title, body .section-title-area .section-subtitle, body .hero-content-style1 h2 { 
        font-family: century-gothic,    sans-serif;
        font-weight: 400;
        font-style: normal;
     }

But it changes only the navbar text, nothing else.

Weirdest part is: https://ctrlv.cz/VnU7 It works if I put in that CSS edit. But then I click publish, and on the original page is only navbar updated. Can someone help me?

Btw, I am importing from adobe creative cloud.

EDIT: I tried a different font and it works! How is it possible? Can I fix it somehow?

Upvotes: 0

Views: 873

Answers (1)

Mohamed Saad
Mohamed Saad

Reputation: 405

Use @font-face and import the font directly on your style file

For example 

@font-face {
font-family:"century-gothic";
src:url("https://use.typekit.net/af/afc5c6/00000000000000003b9b1f23/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/afc5c6/00000000000000003b9b1f23/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/afc5c6/00000000000000003b9b1f23/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;
}

Then use it on you code:

body, body p { 
        font-family: century-gothic;
     }

Upvotes: 1

Related Questions