Font family with kirbytext() not working

Kirby 2 Solved ✅
1

Hello,
I tried to change the font family for my site but when I use the ->kt() method the font family doesn’t change at all. How can I change this behavior?

Andi

2

That’s has nothing to do with the kirbytext() method, but rather with your css. What did you change in your css file?

3

My code works fine without ->kt().
The only thing I changed was this:

body {
	font-family: 'Roboto', sans-serif !important;
	padding-top: 50px;
}
4

Maybe your stylesheet has another font applied to the p element? If you use kirbytext, text is wrapped in p tags.

5

You can usually debug this kind of issue by using the “Inspect element” tool in your browser (Firefox, Chrome, etc.). Right click some of your text and look at what CSS styles are applied to it.

6

@fvsch thanks for your advice but it did not help me to solve this.

The code for the text is

<p class="text">
     <?php echo $page->text()->kt() ?>
</p>

and .text is

.text {
	font-size: 50px;
}
7

If you use your code like above, you will have double p tags, pls do this only:

<?php echo $page->text()->kt() ?>

or

<p class="text">
     <?php echo $page->text() ?>
</p>

The last option won’t render kirbytags and markdown though.

You can also use a custom funktion in your plugin folder which will then still render markdown/kirbytext, but without the p tags:

function ktRaw($content) {
  $text = kirbytext($content);
  return preg_replace('/(.*)<\/p>/', '$1', preg_replace('/<p>(.*)/', '$1', $text));
}

You can then call it like this:

<p class="text">
     <?php echo $page->text()->ktRaw() ?>
</p>
2 Likes
8

And the HTML code this generates is probably looking like:

<p class="text">
    <p>My content</p>
</p>

which is invalid HTML, and which browsers will resolve to:

<p class="text"></p>
<p>My content</p>

So if your styles depend on the text class, they will only apply to an empty paragraph and not to your actual content.

You can confirm if this is what is happening, or something similar or different, using the “Inspect element” tool of your browser of choice.

9

Thanks for your help.
Am I wrong if I say there is no way to set a font style for the ->kt() method for every page without working around?

10

If you need a special class on your p tags, then you are right. You can, however, set a font style on all p tags. Or you can use plain html in your content file.

Markdown does not allow to add a class to an element. Markdown extra does support adding attributes to special elements (headers, links, images, fenced code blocks only).

11

Ok then. Thank you very much

12

The usual approach is to have this kind of structure:

<div class="text">
     <?php echo $page->text()->kt() ?>
</div>

which will probably generate this kind of HTML code:

<div class="text">
     <p>My content, yay!</p>
</div>

And then tweak your CSS styles if needed, so that the text class applies to descendant elements as well, and not only when applied directly to a paragraph.

13

Hey,
that is the most correct answer.
I wonder why I didn’t figure this simple solution out by myself :smiley:
Thank you!

14

Can’t get it work for fenced code blocks.

I tried the examples from PHP Markdown Extra …and much more but no success. :frowning:

Btw., the Header example works well.

And, yes, markdown extra is enabled in my config. :wink:

S.

15

For code blocks in Parsedown, you can add a language class using three backticks followed by the language code, which will then add a class language-php (or whatever language you choose) to the code element. You don’t even need to enable markdown.extra to use this feature.

1 Like