Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Joyn › Adding Custom Fonts
New Landing › How can we help? › Themeforest Theme Support › Joyn › Adding Custom Fonts
- This topic has 8 replies, 3 voices, and was last updated 9 years by Mohammad – SUPPORT.
-
Posted in: Joyn
-
May 4, 2015 at 5:03 am #171374
How do I add custom fonts.
I bought and was provided .css, .eot, .svg, .ttf, .woff file formats, but none seem to want to load via the Add Font options under Font Options.
Please advise.
May 4, 2015 at 6:01 am #171375Hi,
If you would like to add your own @font-face fonts, then here are a few tips to do so. We’d recommend that you use the Font Squirrel web font generator, found here – http://www.fontsquirrel.com/tools/webfont-generator.You’ll need to upload your font files to your server via FTP, or you could upload them one by one to the WordPress Media Manager. Once you’ve uploaded them, you will need to reference them using the following css. You can add this to the custom css box within theme options, or within the child theme css if you are using a child theme. When you download the kit from Font Squirrel, you will find a file named “stylesheet.css” within the zipped folder. This file contains the full @font-face declaration for your uploaded font. We’ve placed a reference for you below:
@font-face { font-family: 'FONT_NAME'; src: url('FONT_URL.eot'); src: url('FONT_URL.eot?#iefix') format('embedded-opentype'), url('FONT_URL.woff') format('woff'), url('FONT_URL.ttf') format('truetype'), url('FONT_URL.svg#FONT_NAME') format('svg'); font-weight: normal; font-style: normal; } // BODY FONT body, h6 { font-family: "FONT_NAME", Arial, Helvetica, Tahoma, sans-serif; } // HEADINGS FONT h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .impact-text-large, .testimonial-text, .header-advert, .sf-count-asset .count-number, #base-promo, .sf-countdown, .sf-icon-character, .fancy-heading h1 { font-family: "FONT_NAME", Arial, Helvetica, Tahoma, sans-serif; }
Thanks
MohammadMay 4, 2015 at 7:16 am #171392Hi Mo,
I have added this to my Custom CSS.
Now how do I access the font?
@font-face {
font-family: ‘ThirstySoftRegular’;
src: url(‘http://taffydev.com.au/clients/bbb/fonts/thirsty-soft-regular.eot’);
src: url(‘http://taffydev.com.au/clients/bbb/fonts/thirsty-soft-regular.eot?#iefix’) format(’embedded-opentype’),
url(‘http://taffydev.com.au/clients/bbb/fonts/thirsty-soft-regular.woff2’) format(‘woff2’),
url(‘http://taffydev.com.au/clients/bbb/fonts/thirsty-soft-regular.woff’) format(‘woff’),
url(‘http://taffydev.com.au/clients/bbb/fonts/thirsty-soft-regular.ttf’) format(‘truetype’),
url(‘http://taffydev.com.au/clients/bbb/fonts/thirsty-soft-regular.svg#youworkforthem’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
/* BODY FONT */
body, h6 {
font-family: “ThirstySoftRegular”, Arial, Helvetica, Tahoma, sans-serif;
}/* HEADINGS FONT */
h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .impact-text-large, .testimonial-text, .header-advert, .sf-count-asset .count-number, #base-promo, .sf-countdown, .sf-icon-character, .fancy-heading h1 {
font-family: “ThirstySoftRegular”, Arial, Helvetica, Tahoma, sans-serif;
}May 4, 2015 at 7:38 am #171399Hi,
Please add !important to css rule.
Thanks
MohammadMay 4, 2015 at 7:42 am #171400Worked that out.
Thanks again.
May 4, 2015 at 7:45 am #171402Hi,
You most welcome.
Thanks
MohammadMay 28, 2015 at 2:13 am #178952just purchased Joyn – where can I upload the custom webfonts… they aren’t allowing me tom upload
May 28, 2015 at 2:21 am #178954sorry… just saw that its inside the redux folder in uploads
May 28, 2015 at 3:41 am #178966Hi,
Its ok.
Thanks
Mohammad -
Posted in: Joyn
You must be logged in and have valid license to reply to this topic.