Only first paragraph appears in Fontsampler font

[CanadaType]

If you enter multiple lines or paragraphs into the Fontsampler, only the first line/paragraph appears in the sampler font. The rest appears in Arial.

[kontur]

How are you inputting the paragraphs? Make sure to paste text in the admin without formatting.

Could you link me to a sample page where this happens, or email me a link to a private one?

[CanadaType]

This happens whenever a hard return is introduced. For example, you type a few words then press return/enter, and everything after that becomes Arial. Same thing if you paste anything (formatted or unformatted) from anywhere.

It's happening in all the Fontsampler instances on the Canada Type site. Here's an example:

https://canadatype.com/product/goluska/

[kontur]

Ah, tricky one! Your stylesheet has this as its very first declaration:

*{font-family:Arial,Helvetica,sans-serif}

So * matches "any" element. What happens is: Fontsamplers are created with a wrapper element for the input which defines the font on that element. Since there is only text in the element, the font gets applied. When you hit enter, browsers split content inside an editable element into new elements. So instead of just text, there is now two elements (one for each line) inside the Fontsampler wrapper element that applies the font. Normally, this would just inherit the font family to those elements, implicitly. But because your stylesheet specifically says that "any" element not having a font-family declared should use Arial, that style declaration overwrites the implicit inheritance from the Fontsampler wrapper element.

If you wish to keep the "any" declaration in your CSS but exclude the elements inside the Fontsampler you can do this:

*{font-family:Arial,Helvetica,sans-serif}

/*... other declarations ...*/

.fontsampler-wrapper .type-tester__content * {
  font-family: inherit;
}

* is super powerful, but it's also super powerful ;)

[CanadaType]

Thanks J! Much appreciated.