Support » Plugin: AMP » Is there a way to change the font?

  • Resolved learn2love

    (@learn2love)


    To whom it may concern,

    I hope this message finds you well. I was wondering if there was a way to change the default font of the reader?

    We are looking to use Work Sans variant 500.

    The way we were hoping the font to look like is found at this page: https://learnlove.ca/2020/08/what-is-anger-and-what-drives-our-actions/

    Thank you very much for your time and help, I greatly appreciate it and wish you the best,

    Dory

    • This topic was modified 5 months, 3 weeks ago by learn2love.
    • This topic was modified 5 months, 3 weeks ago by learn2love.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Support James Osborne

    (@jamesosborne)

    This came us previously, you can find out more here, with the same solution applicable.

    If you have any trouble let us know and we’d be happy to assist.

    You may also be interested to know of the upcoming change to the plugins reader mode, which will allow users to choose from a selected list of themes for your AMP URLs. You can find out more below, or test out the beta version here.
    https://github.com/ampproject/amp-wp/issues/4560

    That’s fantastic, thank you for this! I greatly appreciate your time and help. I am also very excited to check out the new themes available for AMP URLs. Thank you for your great work on this amazing project!

    Hi @jamesosborne, I hope this message finds you well.

    Unfortunately, this solution in the previous post did not work for us. We added both functions to the functions.php file but it did not have any effect on changing the font, even as we put parameters for different fonts inline. Do you think this might be related to the cache?

    We were trying to put this link tag in, but not sure where to put it to target the AMP post pages. Do you have any ideas on where specifically we can incorporate it?

    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">

    If it is simpler, we are also happy to try out using the tool in translational mode. We are just worried that it will modify our existing pages in ways that we don’t like. Would it be possible to use the translational mode only on the posts pages?

    Thank you very much for your time and help, I greatly appreciate it and wish you the best,

    Dory

    Sorry about all the questions

    Plugin Author Weston Ruter

    (@westonruter)

    It turns out that Google Fonts URLs that include css2 aren’t yet supported in AMP plugin v1.5. The v2.0 release will include support for it (via this PR). You can just replace css2 with css and that should also work for you.

    Or, if you’re willing to to try the latest beta release, then you’ll be able to use this stylesheet URL. You can find up-to-the-minute development builds on the wiki: https://github.com/ampproject/amp-wp/wiki/Development-Builds

    Thank you for this, I appreciate it!

    Unfortunately, this still did not solve the problem for us. The text remained the same although we added that link tag in the header.php file and adjusted the css2 to css. The solution from the previous post mentioned above also did not work for us with any font. I’m wondering if maybe it is just a problem with our theme?

    Thank you very much for your time and help with this, I greatly appreciate it, and wish you the best,

    Dory

    Plugin Author Weston Ruter

    (@westonruter)

    If you’re not seeing the change here nor for the other support topic you raised, then you may indeed have a caching issue. You may want to try flushing the cache.

    Okay, thank you for letting me know. I greatly appreciate your time and help with this!

    Dory

    • This reply was modified 5 months, 3 weeks ago by learn2love.

    Thank you for this, I appreciate it! We tried the first strategy by @jamesosborne and it worked for the paragraph fonts after clearing the cache, but not for the header fonts. Is it possible to also target the header?

    Thank you again for your time, it is greatly appreciated,

    Dory

    Plugin Author Weston Ruter

    (@westonruter)

    Yes of course.

    Instead of:

    add_action( 'amp_post_template_css', function() {
    	?>
    	 html[amp] p {
    		font-family: 'Open Sans';
    	}
    	<?php
    } );

    You can just include the heading in the selector, so like:

    add_action( 'amp_post_template_css', function() {
    	?>
    	.amp-wp-title,
    	.amp-wp-article-content {
    		font-family: 'Work Sans';
    	}
    	<?php
    } );

    Fantastic!!

    This did the trick.

    Thank you very much for your time and help, I am extremely grateful, and wish you the very best,

    Dory

    PS: I’m very excited for the next release! Unfortunately, I am uncomfortable loading the beta version online at this time but super excited to see it once it is released. If changing the fonts and adding Yoast SEO breadcrumb compatibility were available to edit from within the plugin, like a checkbox to activate or drop-down menu, I think that would be an amazing feature!

    Thank you so much again for your time

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