-
AuthorPosts
-
May 7, 2018 at 5:04 pm #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.
May 7, 2018 at 5:51 pm #952786Hey 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 ShannonMay 7, 2018 at 6:12 pm #952805Hi 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;
}May 7, 2018 at 6:17 pm #952812Hi,
Please provide a link to the page you are working on.
Best regards,
Jordan ShannonMay 8, 2018 at 6:28 pm #953501Hi,
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
RegardsMay 9, 2018 at 4:55 pm #954048Hi,
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 ShannonMay 10, 2018 at 4:12 pm #954633Hi,
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 helpMay 11, 2018 at 12:08 pm #955211Hi 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,
VictoriaMay 11, 2018 at 12:45 pm #955239This reply has been marked as private.May 16, 2018 at 8:42 am #957385Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.