If you want to use a custom font on your Covet.pics gallery, you'll need to change the CSS variable:


Here is an example how to use the font called "Merriweather" from Google Fonts - https://fonts.google.com/specimen/Merriweather

Step 1. - Make sure the font is loaded onto your site

In our case, Google Font "Merriweather", we need to add the following code to our template:

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

Step 2. - Change the CSS variable on the Covet.pics gallery elements

Now that the font is loaded, we need to change the CSS variable value (--covet-pics-font-family). Here is a Javascript code that will change CSS variable when the gallery is loaded:

document.addEventListener('galleryReady:covetPics', function(e) {
   const elements = document.querySelectorAll("covet-pics-widget, covet-pics-popup, covet-pics-upload");
   elements.forEach((el) => {
       el.style.setProperty('--covet-pics-font-family', "'Merriweather', serif");