[Support request] Cloud.Typography (Sentinel)

Home Forums Support [Support request] Cloud.Typography (Sentinel)

Home Forums Support Cloud.Typography (Sentinel)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #547084
    André

    Hey Tom – like with Josh, I’m trying to use a webfont from Cloud.Typography.com

    Here are the fonts styles:

    https://www.dropbox.com/s/ae0d13l4ddm3mki/Screenshot%202018-04-11%2011.28.29.png?dl=0

    I’ve followed your instructions (taken from Josh’s post), and have added this code to Code Snippet:

    add_filter( 'generate_typography_default_fonts', 'tu_add_system_fonts' );
    function tu_add_system_fonts( $fonts ) {
        $fonts[] = '"Sentinel SSm A",  "Sentinel SSm B"';
        return $fonts;
    }

    I’ve also added the required stylesheet to our header:

    <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6849836/6969992/css/fonts.css" />

    After doing this, the font “kinda” shows within Customizer in two places:

    1.) Just above Google Fonts:

    https://www.dropbox.com/s/q2bhv6lguilw9q0/Screenshot%202018-04-11%2011.13.09.png?dl=0

    2.) Right at the bottom of the list, but listed as both fonts:

    https://www.dropbox.com/s/z0agzndq8bzbxth/Screenshot%202018-04-11%2011.12.47.png?dl=0

    Selecting #1 above renders an incorrect font. And #2 just says “No results found” for Font family.

    However:

    If I add the CSS to our custom CSS stylesheet like this:

    body {
    font-family: "Sentinel SSm A", "Sentinel SSm B";
    font-style: normal;
    font-weight: 400;
    }

    … then the font renders correctly.

    Can you tell why the Customizer isn’t causing the fonts to render correctly?

    Thanks!

    André

    #547539
    Tom
    Lead Developer
    Lead Developer

    The filter doesn’t accept multiple values like that currently.

    As a workaround, we can filter the System Stack font:

    add_filter( 'generate_typography_system_stack', 'tu_overwrite_system_font' );
    function tu_overwrite_system_font() {
        return '"Sentinel SSm A", "Sentinel SSm B"';
    }

    Then choose the “System Stack” option in the list.

    #548115
    André

    Tom, I tried this, and selecting “System Stack” seems to work.

    Is that correct (selecting ‘System Stack’ from the font list)?

    Followup question – what do I do if I wanted to call different fonts from Cloud.Typography.com, for headlines, etc – how would that work?

    I don’t mind coding all the font declarations in the custom CSS to override the Customizer if that’s an easier less “messy” way to handle different cloud fonts from Typography.com.

    I guess my only concern is that GP doesn’t load unused font needlessly that are already defined in the Customizer.

    If coding fonts into the custom CSS, would you suggest that a default font like Arial or Georgia be selected for all the options within the Customizer, then put all the overrides in the custom CSS?

    Thx again, Tom.

    #548588
    Tom
    Lead Developer
    Lead Developer

    If that’s the case, I do suggest using CSS.

    The Customizer only loads Google Fonts if they’re set. If no Google Fonts are set, no font files will be loaded at all. You can set them to “inherit” if you’ll be setting fonts elsewhere.

    That way you can just use @font-face in your CSS.

    #548781
    André

    Tom, perfect – will do that then.

    Do you have a support doc with the CSS styles for all the typeface areas within the Customizer – or do I just use Inspector?

    #548954
    Tom
    Lead Developer
    Lead Developer

    We don’t, although that is a good idea.

    Inspector is best for now, and if you need help with one, just let me know 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.