Support » Theme: Twenty Twenty » Inter Var variable font is SLOW

  • Resolved travisburch

    (@travisburch)


    This variable font makes my site almost 3X slower, by itself.

    If I delete all lines of code that pertain to ‘inter var’ — my site loads in under 1 second. With the variable font, however, it’s consistently 3.5 seconds.

    This is insane. Nothing is worth that kind of speed difference — not for a serious site that actually anticipates serving users.

    Please give us an option to “turn off” the variable font. It’s for the good of the people.

    I LOVE Anders design. Let’s stop dragging it (and the user experience) through the mud. Let us turn off the variable font — at least until it’s accepted tech.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 31 total)
  • travisburch

    (@travisburch)

    @acosmin

    Saw this on the webpage.
    “There has been a critical error on your website. Learn more about debugging in WordPress.”

    In the dashboard, it said ‘a problem has been detected with the Twenty Twenty theme” (or something to that affect). It said it had paused the theme (I believe. It’s almost like it had reverted away from the child theme in the process, too (it didn’t appear activated in recovery mode). If it happens again, I’ll copy the error code.

    Okay, I’ll try it again. I’ve got the whole functions.php file copy+pasted, rather than importing the file from the parent file.

    travisburch

    (@travisburch)

    @kitchin Appreciate your input, here!

    travisburch

    (@travisburch)

    @acosmin so strange. Broke my site again (this time only used ‘Live Preview’, so it didn’t actually break the site.)

    I thought I had it figured out, because I had altered the parent theme file, but I just deleted and reinstalled Twenty Twenty before this test.

    Not sure what the issue is.

    “There has been a critical error on your website. Please check your site admin email inbox for instructions.

    Learn more about debugging in WordPress.”

    • This reply was modified 10 months ago by travisburch.
    acosmin

    (@acosmin)

    @kitchin that seems to work as well 🙂

    acosmin

    (@acosmin)

    @travisburch try kitchin’s solution, maybe include the selectors mentioned in my code…

    acosmin

    (@acosmin)

    @travisburch also, regarding your child theme’s functions.php file, you shouldn’t copy paste the parent’s code in it, that’s why it was causing that error.

    In that file just add <?php at the very top.

    • This reply was modified 10 months ago by acosmin.
    travisburch

    (@travisburch)

    @acosmin

    Okay, so I’ve got the parent’s code copy+pasted in the child functions.php file. I’ll undo that.

    Then I’ve added the snippet mentioned at the very bottom.

    So now add <?php at the very top of the file.

    Giving this a try.

    travisburch

    (@travisburch)

    @acosmin

    So I’ll just import the other file using this: @import url("../twentytwenty/style.css");

    and then add the snippet.

    travisburch

    (@travisburch)

    Forgot to add the @import line in the functions.php, but it still all worked.

    Speed test results:

    Load times are clocking faster 1.2s on pingdom from D.C.

    I think I need to get more acclimated with various data points for speed, though.

    The current speed feels perceptibly less “instant” than my other hack (which was: deleting all ‘inter var’ lines of code from the parent theme). However, the test results say we’re not far off from the other hack. Steve Teare’s article & suggested code

    Many thanks to everyone involved! @acosmin @kitchin you two really are great.

    finebyme

    (@finebyme)

    @travisburch how to do the hack? what code to remove in style.css file?

    acosmin

    (@acosmin)

    @finebyme go toCustomizer > Additional CSS and add the following css:

    
    @supports ( font-variation-settings: normal ) {
    	body,
    	input,
    	textarea,
    	button,
    	.button,
    	.faux-button,
    	.wp-block-button__link,
    	.wp-block-file__button,
    	.has-drop-cap:not(:focus)::first-letter,
    	.entry-content .wp-block-archives,
    	.entry-content .wp-block-categories,
    	.entry-content .wp-block-cover-image,
    	.entry-content .wp-block-latest-comments,
    	.entry-content .wp-block-latest-posts,
    	.entry-content .wp-block-pullquote,
    	.entry-content .wp-block-quote.is-large,
    	.entry-content .wp-block-quote.is-style-large,
    	.entry-content cite,
    	.entry-content figcaption,
    	.entry-content .wp-caption-text {
    		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif !important;
    	}
    }
    .widget_text p,
    .widget_text ol,
    .widget_text ul,
    .widget_text dl,
    .widget_text dt,
    .widget-content .rssSummary,
    .entry-content p,
    .entry-content ol,
    .entry-content ul,
    .entry-content dl,
    .entry-content dt {
            font-family: "Hoefler Text", Garamond, "Times New Roman", serif !important;
    }
    

    Publish/save and enjoy.

    finebyme

    (@finebyme)

    @acosmin thank you. it did work

    travisburch

    (@travisburch)

    @acosmin

    It seems like both of these solutions lose the pull quote block styling (inter var must have been used there). This makes the pull quote block pretty ugly, with a big, bold Hoefler font, IMO.

    I don’t think your solution has this problem, but my other solution (deleting the lines of code) altered font coloring when on dark backgrounds. The theme switches fonts to light colors over dark backgrounds automatically, and that function is lost when deleting the code as I did.

    Fun stuff! Really appreciate your input.

    • This reply was modified 10 months ago by travisburch.
    David Elstob

    (@davwaiguy)

    @macmanx Come on, James, you know fine well the industry doesn’t recommend under 8 seconds!

    If a page goes from 1 second to 6 seconds the probability of bounce increases by 106%.

    Don’t believe me – take Google’s word for it. Think with Google – Page Speed

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Google presents a nice ideal picture of what the web should be, I agree, but I encourage you to run some speed tests on industry-leading sites, like Facebook, Twitter, Amazon, Washington Post, etc. That will give you a nice real-world view.

    If you’d like to drive yourself crazy getting your site under 1 second, you’re welcome to. Susty is a great theme to start with for that: https://sustywp.com/

Viewing 15 replies - 16 through 30 (of 31 total)
  • The topic ‘Inter Var variable font is SLOW’ is closed to new replies.