[Support request] Change the font of one or more words

[Matthieu]

Is it possible to change the font on one or more words? A bit like changing the color of a word with highlight but the font version ?

Thanks

[Elvin]

Hi,

With the right CSS selectors, this is definitely possible.

We simply target the html element using the appropriate selector and apply font-family:[value] to it.

That said, can you link us to the part of the site in question so we could help you better?

You can provide the URL and the specifics on the Private Information text area. Thank you.

[Matthieu]

Thank you for your answer. Example I would like on the group of words: (Web & print and logos uniques) I can make a change of typography, is it possible ?
Thanks

[Matthieu]

Here is the link

[Elvin]

Thank you for your answer. Example I would like on the group of words: (Web & print and logos uniques) I can make a change of typography, is it possible ?
Thanks

To clarify: You want to style the text links within the content area?

If so, I believe you can use the same selectors from the other topic you’ve opened here:
https://generatepress.com/forums/topic/hover-underline/page/2/#post-1515462

Just add in font-family:[value].

Example: (Changing Typography to “Lato” and weight to 600)

.entry-content a[href=’https://www.mmgraphik.com/a-propos/’%5D, .entry-content a[href=’https://www.mmgraphik.com/shop/’%5D{
background-image: linear-gradient(to right, #2e55ff 33.333%, transparent 33.333%, transparent 66.666%, #2e55ff 66.666%);
background-repeat: no-repeat;
background-position: 100% bottom;
background-size: 300% 1px;
transition-property: background-position, color;
transition-duration: 0ms, 250ms;
transition-timing-function: ease-out, ease-in;
font-family: ‘Lato’;
font-weight: 600;
}

Note: If the font face you’ve selected doesn’t apply. You may have to import the font files to the site for it to work.
Read more here:
Adding Local Fonts
Customizing Google Font List

[Matthieu]

Thank you so much, it works.

The problem is that the effect of highlighting and changing the font is also done on buttons. A possibility for not that the css applies on the buttons?

[Elvin]

The problem is that the effect of highlighting and changing the font is also done on buttons. A possibility for not that the css applies on the buttons?

I see that you’ve added more selectors to the code. Ex: .entry-content a[href='https://www.mmgraphik.com/graphiste-freelance/'],

That said, remove the properties your previously added.

If you specifically want the typography styles to apply only on the 2 text links, add this CSS code:

.entry-content h2 a[href='https://www.mmgraphik.com/a-propos/'], .entry-content h2 a[href='https://www.mmgraphik.com/shop/']{
font-family: 'Lato';
font-weight: 600;
}

I just added h2 selector for more specificity. This one specifically styles the 2 text links only.

[Matthieu]

Hello, I added the H2 but it changes the font on the whole sentence and not on the two words

Thanks

[David]

Hi there,

you can target just the <a> element inside any GB Headline blocks like so:

h2.gb-headline a {
    font-familiy: font-name;
}

The font you choose must be enqueued or it will not work. ie. the Font has to be selected somewhere in the Customizer or added using a function.

[Matthieu]

It works thank you very much! How about changing the font of a few words in a paragraph? Example on the page: https://www.mmgraphik.com/a-propos/ change the font of the words: création de logos
it’s possible ?

Thanks

[David]

If you give the text block an Additional CSS class in the Sidebar > Advance settings then you could do this:

p.custom-class a {
    /* Styles here */
}

You can use whatever unique class name in place of custom-class

[Matthieu]

Thank you for your answer, but how to assign this class which has for example 2 words of a paragraph ?

Thanks

[David]

Each paragraph is a separate block. If you select the paragraph and go to the Sidebar settings > Advanced there is the Additional CSS field where you can add that class.

[Matthieu]

The problem is that it’s a few words that are understood in a paragraph

[David]

In that case you would need to use a HTML Block and some HTML like so:

<p>Some text here <span class="custom-text">customized text</span> more text</p>

Then you can style the text like so:

p span.custom-text {
   /* Styles here */
}

[Author]

Posts