How to add new font to Upfront

Trying to add font to upfront. Read several of the posts here. Still not getting the custom font I have to appear.

Followed instructions from here but it didn't work:
https://premium.wpmudev.org/forums/topic/upfront-builder-issue-custom-font-implementation-not-google-fonts?message=support-forums-topic-status-updated#post-1141258

Support access is granted.

  • Sohag Ronjon Dey

    Hi Enduring Epilepsy (Katrina),

    Hope you are doing well today!

    I have gone through your site and opened the home page in the upfront editor. I have found that you have already declared the font-face Saffron-Regular. Then I scrolled down the global css and found that you have not used the font-family for any of the elements yet. You have done the hard part yourself what you need just to add the font-family to your target elements. For example I have added the font family to your menu item like the following.

    #page .navigation-header ul.menu > li.menu-item a, #page .navigation-header ul.menu > li.menu-item > .redactor-box a {
        font-family: Saffron-Regular;
    }

    Please also check the attachment

    Also if you followed the modifications suggested in the link you mentioned

    https://premium.wpmudev.org/forums/topic/upfront-builder-issue-custom-font-implementation-not-google-fonts?message=support-forums-topic-status-updated#post-1141258

    Then please add css like the above just in the css file (custom-fonts-style.css) under the declaration of the font-face so that it look like the following

    @font-face {
        font-family: Saffron-Regular;
    	src: url(http://www.enduringepilepsy.com/wp-content/fonts/Saffron-Regular.otf);
    	font-weight: normal;
    }
    #page .navigation-header ul.menu > li.menu-item a, #page .navigation-header ul.menu > li.menu-item > .redactor-box a {
        font-family: Saffron-Regular;
    }

    Hope either of the above help you.

    Please let us know if you need any further help.

    Cheers,
    Sohag

    • Enduring Epilepsy (Katrina)

      Sorry it's been awhile since I got to address this... I haven't been able to use the font yet as it still isn't appearing in Upfront. Thus the reason for my question...

      I think that while the other thread you referenced is helpful, there is a lack of detail that needs clarified. Where exactly do I add the css file? I'm a bit unclear because 1) the other thread mentions a theme that isn't on Upfront and 2) when I go to themes in my cPanel there are 2 files where I think this could go:

      • /wp-content/themes/upfront
      •/wp-content/themes/uf-issue

      Also, the other thread refers to the CSS as a stylesheet. So does this go in the style folder? for example:

      • wp-content/themes/upfront/styles

      Please specify exactly where I need to add the custom-fonts-style.css Thank you.

  • Sohag Ronjon Dey

    Hi Enduring Epilepsy (Katrina),

    Thanks for your reply and I hope that you are doing well today!

    I am really very sorry that I have not mentioned earlier about the exact directory where we will need to add and customize our files.

    We need to add the custom-fonts-style.css in our active theme's directory. You will find your active theme in

    Dashboard > Appearance > Themes

    Once you are there you will see that the active theme is titled like "Active: Theme Name". Please check the attachment.

    So if your active theme is Issue Magazine then your theme directory will be like

    |--wp-content
    |    |--plugins
    |    |--themes
    |    |    |--uf-issue

    Please add the custom-fonts-style.css file inside this folder.

    In this directory you will also find a functions.php file where you need to enqueue the new style. Open the functions.php file and find

    wp_enqueue_style('current_theme', get_stylesheet_uri());

    - replace it with this:

    wp_enqueue_style('current_theme', get_stylesheet_uri());
    wp_enqueue_style('custom-fonts-style', get_stylesheet_directory_uri() . '/custom-fonts-style.css', array(),false);

    Also if you like to have the font enlisted in the

    Upfront editor > theme settings > Type face (please check the attachment)

    Then please find the settings.php file in the active theme directory. Open the file and add the following code

    'additional_fonts' => '[{family:"Saffron-Regular", variants:["normal"]}]',

    Add this code just before the ending

    );

    For example please check the attachment.

    Hope this helps. Also if you like we can make the changes for this pleas send us your details through our contact form,
    https://premium.wpmudev.org/contact/#i-have-a-different-question using this template:

    Subject: "Attn: Sohag"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me.

    Please DO NOT post the credentials here as this is a public forum.

    Please let me know when you do so.

    Cheers,
    Sohag

  • Dimitris

    Hey there Enduring Epilepsy (Katrina),

    hope you're doing good and don't mind chiming in!

    After the email you've sent, I went ahead and inspected your website once more.

    I can see that you've used the Global CSS section to insert your custom rules which load/import the fonts, and also inserted a rule to use this fonts.

    Seeing the code you've already used, you should add your custom font files in the /wp-content/fonts/ folder in your server. If folder doesn't exist, simply create it.

    Then, you should assign only one font-family per selector, or else only the last one will be used.
    So instead of

    #page .navigation-header ul.menu > li.menu-item a, #page .navigation-header ul.menu > li.menu-item > .redactor-box a {
        font-family: "Saffron-Regular";
        font-family: "Saffron-Swashes";
        font-family: "Black Diamond";
    }

    you should use something like

    #page .navigation-header ul.menu > li.menu-item a, #page .navigation-header ul.menu > li.menu-item > .redactor-box a {
        font-family: "Saffron-Regular";
    }

    and insert additional rules to use the remaining fonts.

    Hope that was some help, let us know about your results on this!
    Warm regards,
    Dimitris

    • Enduring Epilepsy (Katrina)

      This actually continues to make things even more confusing....

      • I already uploaded the fonts as mentioned above to public_html/wp-content/fonts

      • I also tried making the edits that Sohag referred to in settings.php and functions.php

      I sent the email with info for logging into my site because trying to follow his directions was only creating a further problem and wanted someone to either fix the entire issue or give a clear answer.

      But you continue to only giving me snippets of information again...not a whole answer.

      So let's try asking questions one by one to actually get somewhere...

      1) I uploaded the fonts to public_html/wp-content/fonts. Is this is correct?

      I want to be able to use these fonts across the site. Not just in one area. What will make this work?

      2) Do I need the edits to settings.php and functions.php that Sohag described? If so, this has been a problem in editing and is why I sent my login info to support in the email to help. If not, please say so. I don't want extra unnecessary code.

      3) The latest reply from Dimitris mentions one font family per selector. Sohag described being able to add the fonts to Upfront and access the fonts anywhere. Again... this has been poor communication. Which do I need?

      4) Can this be done solely in the Global CSS? There has been contradicting information about this several times now. Please give a clear answer. I don't want extra code in my Global CSS.

      I will open the site to support. I already sent my login information. I would like to resolve this please. Thank you.

  • Dimitris

    Hey there Enduring Epilepsy (Katrina),

    I'm really sorry for the frustration here!

    1. In order to load the extra fonts you need you have to make to steps:
    a) upload the font files in public_html/wp-content/fonts/ folder
    b) import these fonts for further use with the following CSS

    @font-face {
      font-family: Saffron-Regular;
    	src: url(http://www.enduringepilepsy.com/wp-content/fonts/Saffron-Regular.otf);
    	font-weight: normal;
    }

    This example is only for one font and I can see that both of these steps have been made already.

    2. The changes in these files aren't obligatory.
    You can edit settings.php file as my colleague Sohag mentioned before, so you can see your custom fonts in the dropdown with loaded fonts
    https://premium.wpmudev.org/forums/?bb_attachments=1251709&bbat=114508&full
    Making changes to functions.php was proposed in order to use these extra CSS rules we mentioned in point #1 in another file, rather than using the Global Theme CSS section.

    3. After importing your custom fonts as in step #1, you should use it in the elements you need with custom CSS rules. For example:
    /* Use Saffron-Regular for paragraphs */
    #page p {
    font-family: "Saffron-Regular";
    }
    /* Use Saffron-Swashes for headers */
    #page h1,
    #page h2,
    #page h3,
    #page h4,
    #page h5,
    #page h6 {
    font-family: "Saffron-Swashes";
    }
    /* Use Black Diamond for links */
    #page a {
    font-family: "Black Diamond";
    }

    As far as I can see, you're only have to target the elements you want via CSS to use your extra fonts.

    Hope that makes things clearer, let me know if further assistance is required here, for example to find the proper CSS selectors.

    Warm regards,
    Dimitris