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");
});
});
Comments
0 comments
Article is closed for comments.