[Resolved] Local/Custom Font not Rendering in Editor on Tablet or Mobile preview πŸ€”

Home Forums Support [Resolved] Local/Custom Font not Rendering in Editor on Tablet or Mobile preview πŸ€”

Home Forums Support Local/Custom Font not Rendering in Editor on Tablet or Mobile preview πŸ€”

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #2355077
    Kyle Van Deusen

    Hey folks!

    I’ve uploaded a local font using the instructions found through GP. Works great.

    I then used a script to enqueue the child theme CSS into the editor so I could SEE the custom font when I’m editing the page.

    This is working fine on the DESKTOP preview β€” but the custom font does NOT show on the tablet or mobile preview in the editor (it is displaying properly on the front end though).

    Is this a known behavior? Or have I done something wrong?

    Kyle Van Deusen

    Here’s the desktop editor with the RIGHT font: https://theadminbar.com/wp-content/uploads/2022/09/CleanShot-2022-09-27-at-05.57.38@2x.png

    Here’s what it looks like on tablet: https://theadminbar.com/wp-content/uploads/2022/09/CleanShot-2022-09-27-at-05.57.50@2x.png

    The script I’ve used to enqueue the child theme CSS is this:

    add_action( 'enqueue_block_editor_assets', function() {
        wp_enqueue_style( 'ogal-theme-css', 'https://**REDACTED**/wp-content/themes/OGAL-2022/style.css' );
    } );

    *Note I redacted the URL, but I’ve double checked that it’s right in the code πŸ˜‰

    And here’s what I did for the font in my child theme CSS file:

    @font-face {
      font-family: 'Addington';
      src: url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.eot');
      src: url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.eot?#iefix') format('embedded-opentype'),
           url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.svg') format('svg'),
           url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.ttf') format('truetype'),
           url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.woff') format('woff'),
           url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold-1.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
    Customer Support

    Hi Kyle,

    Can you provide the link to the page where we can find the example you shared in your screenshots?

    You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Kyle Van Deusen

    Sure, adding it to the private info

    Customer Support

    Can you try this?

    add_action( 'after_setup_theme', function() {
        add_editor_style( 'https://**REDACTED**/wp-content/themes/OGAL-2022/style.css' );
    } );
    Kyle Van Deusen

    Wahoo! That fixed it! Thank you Ying!

    Just to confirm, I’ll need both the original PHP I put in there AND the new one you gave me? Or are they doing the same thing?

    Customer Support

    I think you will only need the PHP I provided πŸ™‚

    Kyle Van Deusen

    Thank you! πŸ™Œ

    Customer Support

    You are welcome πŸ™‚

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