Digital experiences for all disciplines
New Landing › How can we help? › Atelier › Custom Fonts
New Landing › How can we help? › Atelier › Custom Fonts
- This topic has 5 replies, 6 voices, and was last updated 8 years by Mohammad – SUPPORT.
-
Posted in: Atelier
-
June 24, 2015 at 1:08 pm #188004AstronomixMember
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.
June 24, 2015 at 1:29 pm #188035Hi
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
August 14, 2015 at 7:17 pm #204219sorry, posted in the wrong thread.
August 14, 2015 at 7:25 pm #204222No problem.
-RuiOctober 21, 2015 at 9:00 pm #222342Hello,
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
October 22, 2015 at 11:11 am #222472Hi,
@krymka – Which fonts have been uploaded by you? Please provide me login detail to check and resolve the issue.
Thanks
Mohammad -
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.