New to the community? Start here

Upfront Builder - Issue custom font implementation - not Google Fonts

I have done a lot of searching and I'm a little stumped. I am creating an Upfront theme in Builder (soul of india) and I have read to add the @font-face information in the Global Theme CSS. I have completed that - and added the font in question to h3 - however once saved, it does not work. I have gone in and checked my code and now there is this information in front of it:

[data-variant="undefined"]

I have attempted to enter the @font-face in various ways - with and without quotation marks, spaces etc., and nothing has solved this problem. Is there something I'm missing?

Thanks so much for your assistance in this. I love using the builder. Access has been grated.
Tammie

  • Adam Czajczyk

    Hello Tammie,

    I hope you're well today and thank you for your question!

    Adding a "@font-face" definition is just a part of adding a font. You also need to make sure that font files are available either from an URL on the web or directly from your server. It seems though that this is properly added.

    I accessed your site, downloaded your theme and tested it on my own setup and I can see the same issue. I already asked Upfront developers for help and I'm now awaiting their replay.

    Please keep an eye on this thread and I'll update it as soon as I get a response and/or find a solution.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Tammie,

    Thank you for your patience!

    I got a word from our developers and they confirmed that Upfront (both Builder and Upfront editor) are not entirely compatible with "@font-face". There is a workaround however. Here's how to add non-Google custom fonts to the theme:

    1. Use "@font-face" part of CSS code in a separate file, for example:

    - create "custom-fonts-style.css" file
    - put this code inside:

    @font-face {
    font-family:angelinaregular;
    src: url(http://webhostalacarte.com/wp-content/fonts/angelina-webfont.eot);
    src: url(http://webhostalacarte.com/wp-content/fonts/angelina-webfont.eot?#iefix) format(embedded-opentype),
    url(http://webhostalacarte.com/wp-content/fonts/angelina-webfont.woff) format(woff),
    url(http://webhostalacarte.com/wp-content/fonts/angelina-webfont.ttf) format(truetype),
    url(http://webhostalacarte.com/wp-content/fonts/angelina-webfont.svg#trashhandregular) format(svg);
    font-weight:normal;
    font-style:normal;
}

    - upload the file to the theme's folder on your server (in this case it's a "/wp-content/themes/soul-of-india") folder
    - make sure that you removed that CSS from Global CSS in Upfront Builder.

    2. Enqueue that style file via theme's functions.php file:

    - go to "/wp-contnet/thmes/soul-of-india" folder
    - edit "functions.php" file
    - find that code around line no. 36:

    wp_enqueue_style('current_theme', get_stylesheet_uri());

    - replace it with this:

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

    This would include "custom-fonts-style.css" file and make your font available. You may then use a regular "font-family" declaration anywhere in your theme's styles (global style, preset styles etc) via Upfront Builder.

    There's however another issue that may need to be addressed. Although the style and fonts will be properly added to the theme, it's possible that font files won't be downloaded due to the "cross-site" security rules. On some servers there's no such limitation and on some that can be switched off with an additional rule in .htaccess but to make sure that it works and is "universal" you should download all the font files, upload them to your theme's folder and adjust paths in "custom-fonts-style.css" file accordingly so those files would always be fetched directly from the theme and not from an "outside" source.

    I hope that helps.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Larsman!

    I'm not familiar with cloud.typography.fonts but from what I can see on their website these fonts are not downloadable. According to their site, to use them in your design you simply need to include a css file.

    I think it's worth giving a try then. The procedure would be even simpler because instead of downloading fonts, creating CSS file etc, you would only need to add this line to the "functions.php" file (the same way as described in my post here):

    wp_enqueue_style('custom-font-style', 'URI_OF_CLOUD_FONT_HERE_AS_GIVEN_BY_THEM', false);

    However, as I'm not sure how their CSS is built I'm not also sure if it will work as expected. I'd say: give it a try please and in case it didn't work for you please start a separate thread of your own here:

    https://premium.wpmudev.org/forums/#question

    Best regards,
    Adam

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.