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

Home Forums Support Change the font of one or more words

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1516887
    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

    #1516891
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1516892
    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

    #1516894
    Matthieu

    Here is the link

    #1516937
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1516950
    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?

    #1516970
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1517426
    Matthieu

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

    Thanks

    #1517437
    David
    Staff
    Customer Support

    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.

    #1517446
    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

    #1517569
    David
    Staff
    Customer Support

    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

    #1517818
    Matthieu

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

    Thanks

    #1517949
    David
    Staff
    Customer Support

    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.

    #1517955
    Matthieu

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

    #1517993
    David
    Staff
    Customer Support

    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 */
    }
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.