Custom font appear as a dropdown?

[DrMarsha]

When you add a custom font, does it appear with all of the other Weebly fonts in the dropdown box? I can't seem to find it anywhere. Thanks!

[NJRFTF]

@DrMarsha 

Take a look here - https://editortricks.weebly.com/how-to-install-any-font-into-your-weebly-site.html 

[PaulMathews]

@DrMarsha My experience when implementing fonts from the Google Fonts library is that the font family name will not appear in the Weebly theme font lookup drop-down lists. Now, I normally don't interact with the Weebly theme styling panels at all but instead, heavily customize my Weebly themes to (a) organize the css into a logical, easily searchable library; and (b) use the built-in LESS preprocessor to centralize key site attributes like text fonts, title fonts, button background colors (both default and hover states), etc. I can then specify the name of the font family in the LESS and this is applied in the relevant places throughout the css (where I've replaced the static font family name with the LESS font variable name). Where the font name is a Google font that is not an available Weebly font choice, the Weebly font attributes drop-down list simply shows "Default" as the name of the applied font, e.g., for titles or paragraphs. That's fine since I specify in the css each type of text that will use the particular font, e.g., paragraph text, title text, block quote.

[DrMarsha]

@PaulMathews 

Thank you so much- this is VERY helpful. Maybe you can provide an answer to a question that I cannot seem to find the answer to. I have used a custom font in my Weebly site that I am building and have successfully applied it to all aspects of the site. However, I cannot seem to find where to change the image gallery captions. I can do it individualls in each caption box, which is tedious, but wondering if you knew where i would change this in the HTMl/CSS editor? I right-click > Inspect (attachment) and can see the font used, where it is located, etc. but when I go into the HTLL/CSS editor, this information is nowhere to be found. Any suggestions?And if it isn't in the HMTL/CSS editor, can you provide a code that I can add? I really appreciate your help! 

[PaulMathews]

@DrMarsha In the code inspection screenshot you sent, you'll note the source of each css code block to the upper-right of the code itself. In your shots, you see that the source of the image gallery caption text is "sites.css..." This tells you that that particular code is dynamically loaded (by Weebly script). It isn't part of your theme's css (that's why you couldn't find it). Further, when css is dynamically loaded like this, it loads AFTER your theme's css.

So, how do you handle this? In your case, we see that the "galleryCaptionInnerText" class provides the font size and font family attributes (among other things) for the image gallery captions so that's the class we want to target. In your theme's css, add that class (it's probably not already in your css so you can add it anywhere outside of your css media queries), specify your desired font size, font family, and any other desired attribute settings for the caption text but add the "!important" qualifier to each attribute. In your case, even though the caption text class css loads after your theme's css, the attributes there don't have the !important qualifier which means that we can override whatever is dynamically loaded (even if it is loaded after our custom css is loaded) so long as we apply the qualifier to our css.

.imageGallery .galleryCaptionInnerText p,
.imageGallery .galleryCaptionInnerText {
    font-size: 16px!important;
    font-family: "BadaBingBadaBoom",sans-serif!important;
    font-weight: normal!important;
    .
    .
    .
}

[DrMarsha]

@PaulMathews 

Fantastic! I will try this later today and let you know! Can I add this right at the top before the code starts or do I need to enter it at a particular point in the code? Sorry- very new to HTML/CSS and learning along the way! You have been super helpful!

[PaulMathews]

@DrMarsha Yes, per the second sentence of the second paragraph in my previous post.