How to add a custom font (not google font) to Upfront

I want to add a custom web font to my new site that isnt featured on Google Fonts.

I am using Montserrat which I have added via the Theme Font Manager but the problem is Google Fonts only features 3 weights for this font, however there are 5 weights available on Squirrel Fonts including light and ultra-light (which are the ones I want to add).

Squirrel Fonts have a webfont generator which generates the fonts for you and gives you all of the font files and the @font face css. But I am just not 100% sure how to implement this.

I uploaded the font files to the wp-content/fonts folder via FTP and then added the @font face CSS to the Custom CSS section of Upfront but it didnt seem to work. I am wondering if I am doing this correctly or if there is some special method to get this happening.

Any advice/directions you might be able to provide would be great.

Cheers... brett

  • Vinod Dalvi

    Hi Brett,

    I hope you are well today and thank you for your question.

    It seems you are following the correct steps to add a custom font (not google font) to Upfront
    but i think you are just making some mistake in the @font face CSS added in the Custom CSS section of Upfront so please refer the instructions provided in the following replies.

    https://premium.wpmudev.org/forums/topic/is-there-a-way-to-add-google-fonts-or-other-custom-fonts-to-upfront-theme#post-853370
    https://premium.wpmudev.org/forums/topic/add-a-custom-font-to-upfront-spirit-theme#post-892279

    If the information provided in the above replies don't help you to resolve the issue then could you please tell me what the font file names added in the wp-content/fonts folder and the @font face CSS added to the Custom CSS section of Upfront so that i can troubleshoot it?

    Kind Regards,
    Vinod Dalvi

  • Brett

    Thanks Vinold,

    I had the pathway referenced in the @font-face code so I updated with the actual URL but still not working. I've read the posts you provided but it's a little confusing because there seems to be some conflicting advice in the different threads on exactly what folders to upload the fonts and then which sections to place the @font-face CSS

    As per post (https://premium.wpmudev.org/blog/custom-fonts-css/) here's what I have done:

    Uploaded the various custom font variations via FTP to the child theme font folder eg: wp-content/themes/uf-spirit/fonts/montserrat-light-webfont.ttf *not* the wp-contents/fonts folder

    then in the child theme style.css file I have added the following @font-face via FTP

    @font-face {
    font-family: 'montserratlight';
    src: url(http://acs.razordigital.com.au/wp-content/themes/uf-spirit/fonts/montserrat-light-webfont.eot);
    src: url(http://acs.razordigital.com.au/wp-content/themes/uf-spirit/fonts/montserrat-light-webfont.eot?#iefix) format('embedded-opentype'),
    url(http://acs.razordigital.com.au/wp-content/themes/uf-spirit/fonts/montserrat-light-webfont.woff2) format('woff2'),
    url(http://acs.razordigital.com.au/wp-content/themes/uf-spirit/fonts/montserrat-light-webfont.woff) format('woff'),
    url(http://acs.razordigital.com.au/wp-content/themes/uf-spirit/fonts/montserrat-light-webfont.ttf) format('truetype'),
    url(http://acs.razordigital.com.au/wp-content/themes/uf-spirit/fonts/montserrat-light-webfont.svg#montserratlight) format('svg');
    font-weight: normal;
    font-style: normal;

    }

    This results in the @font-face code now being visible when I check Spirit: Stylesheet via the Appearance > Editor option in WP-Admin

    The second post then says to also include the @font-face to the Custom CSS section of Upfront, which I have also done but still no luck.

    Ideas?

  • Vinod Dalvi

    Hi Brett,

    Thank you for your reply.

    I've read the posts you provided but it's a little confusing because there seems to be some conflicting advice in the different threads on exactly what folders to upload the fonts and then which sections to place the @font-face CSS

    Actually you should save the font files in the wp-contents/fonts directory instead of theme directory and save the CSS in the custom CSS option of theme instead of style.css file of theme as the changes made in the theme gets overwritten and lost when you update the theme and you will have to make these changes again after theme updation.

    I have just tested on your site by applying the montserratlight font on one of theme navigation menu item and it seems working fine as shown in the attached screenshots.

    Is it not working with any specific text or anything else?

    Please advise.

    Also would you mind if I logged in to your site and did some testing? If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings as described on the following page and reply on this thread after granting it?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Regards,
    Vinod Dalvi

  • Brett

    Hey Vinod,

    It's all good... I followed your instructions and moved the various font files to the theme/fonts folder, updated the src url, then added the @font-face css to the custom css section AND then added the H6 specific css for Montserrat Light in the actual element and it worked perfectly!

    This is what I meant by conflicting advice in the different threads because the blog post says to upload the font files to the themes/your-theme/fonts and then to put the @font-face css in style.css

    But thank you for setting the record straight and helping me resolve this quickly.

  • Brett

    I am thinking that it would be great if there was an Upfront Wiki or something so that there was a Single Source of Truth for these sorts of things.

    I have found workarounds or received great assistance plenty of times from you support guys but sometimes it is hard to actually find stuff in the support threads because the search function isnt the greatest or sometimes referencing multiple threads can make things hard to follow because it feels like you're going around in circles.

    The original documentation is great for the very basics but if you're starting to get really dive into Upfront it doesnt really shed much light on things.

    Having a centralised Wiki that people could contribute to and use might even help reduce the amount of support requests you get by having a living repository of topics to reference.

  • Vinod Dalvi

    Hi Brett,

    Thank you for your valuable feedback here.

    We'll do consider your feedback to improve our documentation.

    We are already improving our products documentation and usage instructions so that users can easily understand it which you can find on following pages.

    https://premium.wpmudev.org/project/spirit/#product-usage
    https://premium.wpmudev.org/blog/tag/upfront/
    https://premium.wpmudev.org/manuals/
    https://premium.wpmudev.org/projects/category/videos/

    I liked your centralized Wiki idea which will add one more stream in our documentation. I will move this over to the features & feedback section. This way it can be considered for future development, and we can also see what other community members think about the feature request.

    Actually what happens the solution that works for one member doesn't work for others because of many factors like plugins, theme and web host etc. so we have to provide another alternate solution to make it work apart from the best solution therefore it jumbles other members.

    You can search our forum from this page https://premium.wpmudev.org/forums/#big-search-searchbox also our forum is very well indexed in the Google search engine so you can use it to search forum by prefixing the search keywords with site:https://premium.wpmudev.org/forums

    Cheers,
    Vinod Dalvi