Custom Fonts

[Astronomix]

I bought this theme as it had a custom font uploader. However, it appears it still doesn’t work.

I was under the impression that there was a manual workaround until Redux fixed it but this doesn’t work either. You can’t “select” the font in the dropdown.

I’m therefore very disappointed and now seek to do this manually via css.

I’ve done this several times before on other themes but there is something different about this theme and I can’t get it to work.

I’ve uploaded the fonts (eot, svg, rtf, woff etc) via file manager to the atelier/css/font file.

I have a css snippet to call it. Normally I would put this in the atelier css stylesheet but on this theme it appears to be almost empty.

Where do I put the snippet so it is called correctly?

Exact instructions please.

[Kyle – SUPPORT]

Hi

Here’s my method:

1) Use a child theme to prevent losing work when updating the theme. Upload your webfonts to a fonts folder in the child theme.

2) Put the custom font css in it’s own css file, for example webfonts.css, in the fonts folder. The css you will need to use the fonts should be like this:

@font-face {
    font-family:'Circular';
    src: url('circularstd-bold.eot');
    src: url('circularstd-bold.eot?#iefix') format('embedded-opentype'),
         url('circularstd-bold.woff') format('woff'),
         url('circularstd-bold.ttf') format('truetype'),
         url('circularstd-bold.svg#circularstd-black') format('svg');
    font-weight:600;
    font-style:normal;
}

@font-face {
    font-family:'Circular';
    src: url('circularstd-medium.eot');
    src: url('circularstd-medium.eot?#iefix') format('embedded-opentype'),
         url('circularstd-medium.woff') format('woff'),
         url('circularstd-medium.ttf') format('truetype'),
         url('circularstd-medium.svg#circularstd-black') format('svg');
    font-weight:500;
    font-style:normal;
}

@font-face {
    font-family:'Circular';
    src: url('circularstd-book.eot');
    src: url('circularstd-book.eot?#iefix') format('embedded-opentype'),
         url('circularstd-book.woff') format('woff'),
         url('circularstd-book.ttf') format('truetype'),
         url('circularstd-book.svg#circularstd-black') format('svg');
    font-weight:400;
    font-style:normal;
}

/* BODY FONT */
body,p {
font-family: "Circular"!important;
}

/* HEADING FONT */
h1, .impact-text,.impact-text-large {
font-family: "Circular"!important;
}
h2,.blog-item .quote-excerpt {
font-family: "Circular"!important;
}
h3 {
font-family: "Circular"!important;
}
h4 {
font-family: "Circular"!important;
}
h5 {
font-family: "Circular"!important;
}
h6 {
font-family: "Circular"!important;
}

/* MENU FONT */
#main-nav, #header nav, #vertical-nav nav, .header-9#header-section #main-nav, #overlay-menu nav, #mobile-menu, #one-page-nav li .hover-caption {
font-family: "Circular"!important;
}

3) In your child theme style.css file import the webfont.css file using:

@import url("webfonts/webfonts.css");

– Kyle

[JaySchulz]

sorry, posted in the wrong thread.

[Rui Guerreiro – SUPPORT]

No problem.
-Rui

[krymka]

Hello,

trying to upload a font file trough theme options/font options I got an error. Finally I succeed with the uploading but the font doesn’t appear in the drop down. Is there something in addition I should do?

Thank you in advance!

Maria

[Mohammad – SUPPORT]

Hi,

@krymka – Which fonts have been uploaded by you? Please provide me login detail to check and resolve the issue.
Thanks
Mohammad