Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #952759

    Hello,
    I am wondering if I can use two different Fonts on the same page.
    I am using Enfold with the Open Sans font family and I intend to use a second font (Playfair Display) for one subpage on the same website.
    Could you pls give me a clue how can I implement this?
    If this would work, would the second font slow down the page?
    Thanks a lot for your answer.

    • This topic was modified 6 years, 6 months ago by smilefactory.
    #952786

    Hey smilefactory,

    You can use 2 fonts on the page, but you need to utilize css to implement it properly by targeting the portions you want to be a different font.

    Best regards,
    Jordan Shannon

    #952805

    Hi Jordan,
    thx for your quick reply. I have already used CSS to ad a font class but it didn’t work for some reason. Could you pls take a look and tell me where the bug is?

    /* Playfair Display Font 50px*/
    

    .playfair {
    font-family: Playfair Display !important;
    font-size: 50px;
    color: #ffffff !important;
    }`
    I also targeted the page ID like this:
    page-id-6919 h1. {
    color: #ffff !important;
    font-size: 50px;
    font-family: Playfair Display !important;
    }

    #952812

    Hi,

    Please provide a link to the page you are working on.

    Best regards,
    Jordan Shannon

    #953501

    Hi,
    pls check the private content for the link.
    It seems to me that every change I apply into the Quick CSS area is not working anymore after the latest update to Enfold 4.3 even though the changes are being written in the enfold.css
    I already renamed the enfold.css in the dynamic_avia folder to generate a new css file, flushed the cache and still can`t figure out where the problem is
    Regards

    #954048

    Hi,

    Can you please remove all custom css aside from the font styles? If the font then works, this indicates there is malformed css written within your custom styles.

    Best regards,
    Jordan Shannon

    #954633

    Hi,
    I found out that every change I make in Quick CSS is not working, thus this is not being a particular font issue. For some reason the theme is using an old css file created several weeks ago.
    However I installed a couple of weeks ago (just about the same time I updated the theme to version 4.3) the WP Rocket cache plugin. Furthermore pretty much at the same time I changed the website address. (WP is installed in a sub directory. http://www.mywebseite.com/cms ) to http://www.mywebseite.com/.
    After updating Enfold to the latest version I got the message that due to heavy changes in the css and js file structure the cached files should be reseted, what I already have done.. I already emptied the cache and reloaded it again, deactivated and actiated WP Rocket,
    Do you have any clue where the problem is?
    Thank you in advance for your help

    #955211

    Hi smilefactory,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #955239
    This reply has been marked as private.
    #957385

    Hi,

    Thanks for the update. The css declaration above is correct but it’s not working because the “playfair display” font is not loaded yet. Since the Open Sans font is already set in the theme options, you have to load the other font manually. Here’s a good tutorial for that.

    // http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/

    The quickest implementation would be via the functions.php file. You have to enqueue the font files.

    function avia_add_custom_google_fonts() {
    wp_enqueue_style( 'avia-custom-google-fonts', 'https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i&subset=cyrillic,latin-ext,vietnamese', false ); 
    }
    
    add_action( 'wp_enqueue_scripts', 'avia_add_custom_google_fonts' );
    

    Best regards,
    Ismael

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