setting custom font css for activ breakpoints

I have set up my own theme with the builder and things are working nicely. Thanks to Adam I have successfully implemented a custom font not within Google. Now the issue I am having is having it adjust on smaller screens. The @media does not appear to work in the custom css. I have searched and can not seem to find a work-around. If you know of anything that would be great!

The child theme I am using is Soul of India. It's under the /soul-of-india site. It's a multi-site.

Thank you for any insight you can provide.

  • Bojan Radonic

    Hey there Tammie,

    Hope you're well today :slight_smile:

    This should be possible by using Responsive mode in Upfront and selecting specific font on mobile and tablet screens.

    To do that first load Upfront editor and then click on Responsive mode:

    Once responsive mode is loaded, select Mobile screens for example, simply select element you wish to change font to (ie paragraph or heading) and then select your prefered font, see screenshot:

    Hope this helps :slight_smile:


  • Tammie

    Hi Bojan,
    Thank you so much for your quick response. I have found the information you are speaking of, unfortunately that does not help me when using a custom font that is not Google. I was given instructions on how to set it up by uploading the font, adding the @font-face to an additional css document and calling it from the functions.php . However, when I use the special font - for a header in the the custom css.

    When I am in the responsive mode, I am unable to make the change on the side because of the specific font (which does not show up in the dropdown). It has to be used via the CSS.

    When I open the custom css in responsive mode, I do not know how to alter the css to be conditional to the screen size. I attempted to add the @media but the system does not accept that.

    Is this something I could perhaps put into the custom css style sheet I created for the new font?

    Thanks for any insight.

  • Bojan Radonic

    Hey again Tammie,

    I've checked your site and adding styles as you did in presets should do the trick for both desktop and responsive resolutions, I've checked this specific part:

    "The benefit of pilgrimage to holy places is not because of their rich history, but for the fact that divine blessings can be experienced when visiting them. Their very soil is impregnated with a higher consciousness."

    And the same font "Angelina" is being applied on mobile resolutions as well. Could you please point out where specifically is this not working so I can take a look?


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.