this is inside the zip file downloaded from Google:

so you see the variable fonts – and inside the static folder the other fonts.
Enfold can handle both – but you had to upload them separately. So unzip that file – the varible fonts put in a Folder f.e. Petrona-variable and pull out that zip file the static folder and rename it to Petrona
zip these two folders ( on Mac do not include Mac Meta data ). Now these zip files are ready to upload. Make a decision what you like to use.
For testing purpose – if you only need 100,400,700 download: Link
and here is the variable font: Link
First test only the static fonts. Normal users rarely know how to use a variable font ;)
Enfold font manager:

Choose your font then in General Styling – Fonts – at the end of the list there are the uploaded fonts
all modern-quote headings (from enfold heading element) are set to font-weight 300 on default. You can insert this to have bold :
#top .modern-quote .av-special-heading-tag {
font-weight: 700;
}
your headings inside text-block are handled different – so they are bold.
the above problem may have nothing to do with this, but you are aware that the downloaded Petrona.zip contains both static and variable fonts.
Google Petrona is one such variable font. The zip file you download from Google contains the variable font files and the static font files in a subfolder. Enfold also supports the use of variable fonts – but you need to upload them separately.
Now you has to decide if you like to use both – and the static font files as fallback solution ( that needs some additional conditional querries ) – or to use one kind of font file.
The static fonts contain a large number of styles (from 100 to 900 – regular and italic); you may want to make a selection here.
Hey Ismael
That looks like it works nicely! Thank you very much!
The steps to get this working for a new person coming across this long thread:
If using the Enfold’s Advance Layout Builder (ALB) then the following needs to be done to get a single product image to change on hover. This will need to manually be done for each image and can not be done automatically from the approach Ismael showed.
————–
Go to the product image in the backend.
Click the main image and go to Advanced -> Animation -> Parallax Rules and Image Hover Effect and switch it to “Fade to another image” a little further down select which image it should switch to. Save the product and check the frontend. Hovering over the product image should now switch to the image that was selected.
——
Ismael I got one more thing to ask…
Can you also update the older thread showing the code needed? So that anyone whom comes across it can see the code snippet needed to get the general WooCommerce hover product (single, shop, archive) switch to another image.
Thank you again!
Hi,
Thanks for the update. Please try replacing enfold/framework/php/class-responsive-images.php with this file: https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_7_0/framework/php/class-responsive-images.php
Best regards,
Rikard
Hey Aram,
Thank you for the inquiry.
We temporarily disabled the Enfold > Performance > File Compression settings, and this seems to have fixed the issue with the blog page. We are not yet sure why the background image of the color section is not displaying. It worked fine on a test page we created (see the private field).
Please try to remove the current color section and delete the related background image from the Media > Library, then add the color section again and re-upload the image. Let us know how it goes.
Best regards,
Ismael
Mike
Omg, sorry. I do all sites with Enfold, forgot the client wanted Avada on that one.
Tony
Hi, Please help me with the issues that I face after updating the enfold.
Color section background image is not showing (cache is cleared and incognito browser is used).
There are unnecessary symbols on blog page and also in Advanced Layout Builder.
Thank You in advance!
PepeGuest
Hello,
I need to set up a temporary site to migrate a website. The original site has enfold but I don’t want to migrate the databases. I want to reconstruct everything from scratch as the site is too old, so there would be a time where I have to enfold deployments.
Is this scenario supported without buying another license?
Cheers.
Hallo,
ich habe Probleme mit der Darstellung des Portfolio Masonry.
Ich arbeite mit Landscape- und Portrait-Tags um einige Bilder größer anzuzeigen.
Alle Portfolio featured Images sind in einer Größe angelegt.
Das Problem ist, das die Sortierung nach Datum nicht stimmmt.
Ich möchte 2 Spalten, mit einem grosses Bild und daneben 2 kleine untereinender.
In der nächsten Zeilen möglichst umgekehrt – und genau dies macht die Taxonomie leider nicht.
Die großen Bilder setzt er alle untereinenander, nicht versetzt.
Enfold setzt dazwischen einfach andere Bilder (älteren Datums) oder er hält die reihenfolgen der großen Bilder nicht ein.
Ich habe alles ausprobiert auch mit Seitenreihenfolge, bin aber mit meinem Latein am Ende. :-)
Gibt es Hilfe?
———–
Hello,
I have problems with the display of Portfolio Masonry.
I work with landscape and portrait tags to display some images larger. (double size)
All portfolio featured images are set up in one size.
The problem is that the sorting by date is not correct.
I want 2 columns, with a large image and next to it 2 small ones, one below the other.
In the next row, if possible, the other way round – and unfortunately this is exactly what the taxonomy does not do.
He places the large pictures one below the other, not offset.
Enfold simply puts other images (older dates) in between or it does not maintain the order of the large images.
I have tried everything, including the page order, but I am at my wits’ end. :-)
Is there any help?
-
This topic was modified 1 month, 2 weeks ago by
bur2000.
-
This topic was modified 1 month, 2 weeks ago by
bur2000.
Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike
Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike
Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike
Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css. – what file compression setting do?
I updated one of our client’s websites to Enfold 7.0 last week and have been experiencing very slow speeds when trying to edit pages.
We have have repaired and optimized the database tables and emptied the debug log file, which was quite large. We also updated PHP to the latest release and increased the PHP resources to improve the website’s performance. Unfortunately, none of those things have helped.
Any suggestions or assistance would be appreciated. Thanks.
Hi,
We modified the code in the Quick CSS field:
@media only screen and (max-width: 768px) {
#top .avia-slideshow.av-lu5z97j3-d1f957c8c38e449b8b56e5cb4753112f .avia-slideshow-slide img {
min-height: 500px;
object-fit: cover;
}
#top .av-m7nj2xd7-f8dc5edf704b129f594536c49dabd9b8.avia-slideshow li img,
#top .av-m8474mmq-b8b082188475e1a03955aab66d3e8639 li img,
#top .av-m7utj0fm-55a4085e08fb8dd95eeb6325426a31b7 li img
{
height: 300px;
object-fit: cover;
object-position: right;
}
}
Result:
View post on imgur.com
We also disabled the Enfold > Performance > File Compression settings temporarily. You can enable it back when you’re done editing the site.
Best regards,
Ismael
Hey Sandro,
You shouldn’t have to do anything except register your theme license, please refer to this: https://kriesi.at/documentation/enfold/theme-registration/. Make sure to keep a recent backup of your site, and the theme settings can be exported under Enfold->Import/Export.
Best regards,
Rikard
Sandro MüllerGuest
Hallo! Ich habe einen komplett eingerichtete WordPress Web Shop übernommen wo bereits Enfold 6.09 installiert und konfiguriert ist. Der Vorbenutzer hat seine Lizenz mitgenommen. Ich habe jetzt eine neue Lizenz erworben und benötige Unterstützung bei der Installation meiner Lizenz auf die Seite OHNE die Web Seite neu aufbauen zu müssen. Haben sie mir eine Anleitung?
Hey ballindigital,
Thank you for the inquiry.
You could apply a minimum height to the special heading element:
@media only screen and (max-width: 767px) {
#top .av-special-heading {
min-height: 61px;
}
}
View post on imgur.com
Please note that the modification above will apply to every Special Heading element. You may need to apply a custom css class to the elements where you want this to be applied.
— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
Best regards,
Ismael
Hi,
Did you add the code in the Enfold > General Styling > Quick CSS field? Please provide the login details in the private field so that we can test the modifications.
Best regards,
Ismael
Hi,
Thank you for the info.
We are not yet sure why the < br > tags were added to the av_buttonrow element, but we managed to remove them by manually editing the shortcodes. We enabled the builder’s debug mode.
— https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode
View post on imgur.com
Best regards,
Ismael
Hey rgupta2019,
Thank you for the inquiry.
You can add this css code to apply a minimum width to the mega menu container:
#menu-item-439 .avia_mega_div.three.units {
min-width: 300px;
}
Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.
Best regards,
Ismael
Hi,
Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
Hey Jak73,
Please try the following in Quick CSS under Enfold->General Styling:
#top #header_main .av-main-nav > li > a {
line-height: 0;
}
Best regards,
Rikard
Hi,
Thanks for letting us know. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
Hi,
Thanks for the update. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
OK, so I deleted the font I uploaded via Enfold > Import/Export > Custom Type Fonts Manager. I assume that it’s just a duplicate of the Sacramento that Enfold has by default.
I believe I need a class because almost all headings will use Open Sans. Blog post titles will always use Open Sans. Only a few instances of H2 and H3 will use Sacramento.
The custom class input field does not have the dot.
With my first question, I just wanted to make sure that the font also works with your method. So you used the Enfold support for Google Fonts (something we should actually avoid in Europe because of GDPR requirements) and activated the font that way.
The second question is about whether you can avoid using the custom class if these headings could have something in common. For example, that you want to have all blog post titles with this font.
Now – make shure that the custom class input field is filled without that dot for classes. On the heading element this custom class goes (as mentioned already) to the parent of the h tag. So the code will work for all heading tags (h1, h2 etc. ) with:
#top .av-special-heading.extralargedisplayfont .av-special-heading-tag {
font-family: 'sacramento';
}

The font Sacramento is already activated in Enfold, is it not? It is a selectable option in the Fonts tab by default.
Regardless, the CSS does not work. Sacramento does not display, rather a substitute font displays.
To experiment, I uploaded Sacramento via Enfold > Import/Export > Custom Type Fonts Manager. The Sacramento ttf file is compressed (e.g., sacramento.tff.zip) inside a compressed folder compressed. It displayed as Sacramento 2 for a moment. Please advise is this custom upload is a redundant duplicate and not needed and should be removed to avoid a slow site.
Please advise on how to get Sacramento to show when the relevant class is applied to text. Also note that some text already has a class assigned to it and needs Sacramento added to it. In total, I need one class for any heading text I apply the class to (.av-special-heading-tag), and one class for the large text that has this class .extralargedisplayfont h2.
Hey purmar2,
There’s nothing in the theme which would cause any files to be deleted automatically. I would recommend that you register your licenses if you haven’t done so already: https://kriesi.at/documentation/enfold/theme-registration/
Best regards,
Rikard