html – How to make &quot;Semantic Quotes&quot; with the tag <q>, but it is with a different font-family</q>

Question:

The question is very simple and straightforward, I want to have a font style for the paragraph and another font style for the quotes, but when I put the content between the <q> tag what's inside takes the font-family of the <q> and loses the font-family of <p> .

To make it clearer see the example.

 p { font-size: 32px; font-family: serif; } q { font-family: sans-serif; }
 <p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

The part of the text that is surrounded by the <q> tags has the font-family different from the <p> , but I want only the quotation marks and not the entire text inside the tag

I don't want to use direct quotes in the body of the text, it has to be with the <q> tag, that wouldn't be ok ... "texto" ...

How can I solve this problem semantically using the <q> tag and so that I can reuse it in other parts of the text?

Answer:

One way to do this is to define the differentiated font-family only for the after and before pseudo-elements of the q tag:

 p { font-size: 32px; font-family: serif; } q:before { content: open-quote; font-family: sans-serif; } q:after { content: close-quote; font-family: sans-serif; }
 <p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

With this, only the quotes will have the different font-family . Content inside <q> the same font as <p> .


Remembering that if the q has specific rules, the pseudo-elements will also have them:

 p { font-size: 32px; font-family: serif; } /* q com regras específicas, serão aplicadas em before e after */ q { color: red; } q:before { content: open-quote; font-family: sans-serif; } q:after { content: close-quote; font-family: sans-serif; }
 <p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

In this case, before and after inherit the red color defined in q . If this is not what you want, just define a different color in the pseudo-elements:

 p { font-size: 32px; font-family: serif; } /* q com regras específicas */ q { color: red; } q:before { content: open-quote; font-family: sans-serif; /* sobrescrever a cor definida em q */ color: black; } q:after { content: close-quote; font-family: sans-serif; /* sobrescrever a cor definida em q */ color: black; }
 <p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

Reference: MDN

Scroll to Top