Change Font

You can now change the font directly in the app.

1. Open Covet.pics and go to the Customize Gallery screen

2. Scroll down the left settings menu to Style Settings

3. Click the Font dropdown box and select a font

4. Save Changes

Custom Font

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

--covet-pics-font-family

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");
   });
});