WP OnePress custom font - css

Question

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?

Answer 1

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