BACK-OFFICE: ARTICLES & FONTS

  • Author
    Posts
  • #3018170

    openthehub
    Member

    Hi,

    How to change the font, size, color of a text for an article in a WordPress website ?
    I dont have such tools when I write an article.

    Thansk in advance for your answer.

    The blog I need help with is hubtv.art.

    #3018277

    joyinco
    Member

    Hi there,

    You told me in a previous post that you are using the Intergalactic 2 theme. For this theme, you can change the font in Customize > Fonts. However this theme does not allow you to change the color or size of the font. That would need to be done via custom CSS.

    If you have a premium or business plan you can enter custom CSS. If you have one of these plans, let us know exactly which text you would like changed and how you would like it to look and we can help further.

    #3018278

    nixiack
    Staff

    Hi @hubtvart,

    Here is a post that covers how to change font families, colors and size of text in articles:

    https://en.forums.wordpress.com/topic/change-text-color-2?replies=3

    Due to the age of the post I double checked the links and they they all work still, so hopefully it helps! Let me know if you need anything else.

    Happy blogging! :)

    #3018279

    nixiack
    Staff

    Whoops, sorry @joyinco, I did refresh but apparently not quick enough before I hit submit. I hope we can help them out :)

    #3018281

    joyinco
    Member

    Thanks for the additional info @nixiack8! I am going to make a note of where to find that again!

    @hubtvart if you are comfortable editing html, you can use the links provided by @nixiack8 to make your changes on individual pages without a premium or business plan.

    #3018282

    nixiack
    Staff

    @joyinco no problem! One thing to note from the Custom Design is this:

    As of September 1, 2014, Custom Design is now a feature of the WordPress.com Premium and Business Plans

    If @hubtvart has a Premium or Business plan it comes automatically so it should help or solve the question. Here is to it working out! Let us know @hubtvart I am very curious…. :)

    #3018432

    openthehub
    Member

    Dear all,

    Thanks a lot for your feedback !

    1) @joyinco, I have a Premium plan and I want the font “Futura PT” for the articles and the sub-menus.

    2) @nixiack8, I followed your link, where I found another one (https://wpbtips.wordpress.com/2009/07/11/formatting-text-pt-5/), which suggests to use that html code to change the fonts:
    <span style=”font-family:SPECIFY;”>TEXT HERE</span>

    Still, when I used it in my back-office, I saw no changes in the front.

    3) Is it also possible to change the font of the sub-menu ?
    For example, sub-menu “Art Graphie” or “Musique” (linked to big menu “Categories”) in my website ?
    Check it out > http://www.hubtv.art

    Thansk in advance for your answers !

    #3018453

    joyinco
    Member

    Hi hubtvart,

    To change the font for the articles and sub-menus, go to your custom CSS editor (Customize > Additional CSS) and add the following:

    article p, .sub-menu {
    font-family: “Futura PT”;}

    #3018488

    nixiack
    Staff

    @hubtvart did the above work? Let us know I am anxious :)

    #3018514

    openthehub
    Member

    Dear all,

    I used the CSS code provided by @joyinco.
    Still no changes…

    Did I miss something ?
    Thanks for your answer.

    #3018517

    joyinco
    Member

    Hi hubtvart,

    This code worked for me on a site with the Intergalactic 2 theme. I tried to take a look at your site, but you currently do not have any sub-menus nor any article text to check if these changes are working. Can you add a sub-menu/child page and some text in one of your pages or blogs?

    Let us know when you have those available and we’ll take a look.

    #3018519

    openthehub
    Member

    Hi @joyinco,

    I already have a sub-menus (https://hubtv.art/ > “Art Graphique’, “Musique”) and some text in the article (https://hubtv.art/2017/05/31/premier-article-de-blog/).

    Let me know how to process the CSS code ! I’m anxious too ^^ !
    Thanks in advance for your feedback.

    #3018520

    joyinco
    Member

    Hi @hubtv,

    I took a look at your site. The font family is changed to Future PT in the text at the link you gave (https://hubtv.art/2017/05/31/premier-article-de-blog/). So that is working! Yay!

    For the sub menu, the Art Graphique is not actually a sub-menu. It is within a widget. Try this code instead:
    article p, li.cat-item {
    font-family: “Futura PT”;}

    If you navigate to the blog you list above with the CSS editor open, you can comment out the CSS and see the font change.

    #3018526

    openthehub
    Member

    Hi @joyinco,

    All fonts (menu and articles) are changed. IT WORKS !
    Thank you very much !

    I would have very last questions regarding to the fonts:
    – How to change the size of “Art Graphique”, “Musique” in the widget ?
    – How to change the font of the category “Contacts” in the menu ?

    Thanks a lot again.

    #3018530

    joyinco
    Member

    Hi @hubtvart,

    I am happy to help!

    – To change the size of “Art Graphique”, “Musique” in the widget add the following to your CSS:

    li.cat-item {
    font-size: 110%;}

    The default setting is 100%, so increase it to whatever you like there.

    – To change the font of Contacts in the menu, add the following CSS:

    .menu {
    font-family: “Futura PT”;}

    (Or whichever font you want there in the quotes.)
    Note that this will change the font of all menu items. Please let me know if that is not what you want. Right no, only the “Contact” page is in your menu.

    #3018545

    openthehub
    Member

    Dear @joyinco

    It works too for “Contacts” ! Thank you very much.

    When I try to change the size of the section “Contacts” through the path ‘Customize > Fonts > Size’, nothing happens (It only works for “Rubriques” and “Social”).
    I guess it must be done with a CSS code too ?

    #3018546

    openthehub
    Member

    Dear @joyinco,

    In addition to my last question (How to change the size of the section “Contacts” ?), how to change the color of that same section ?

    Thanks a lot for your precious help.

    #3018548

    joyinco
    Member

    Hi @hubtvart,

    When I try to change the size of the section “Contacts” through the path ‘Customize > Fonts > Size’, nothing happens

    This is because we made the font changes in CSS. If you remove the code
    .menu {
    font-family: "Futura PT";}

    from your CSS, you can set the font family and size in the Customize > Fonts area. Once you select the font family, you can then adjust the size.

    When using the Customizer, changing the Base Font will change the font of the menu items like “Contacts” as well as most of the other text on your site. Changing the Headings Font will change the font of the title in your widgets (like “Rubriques” and “Social”) and other headings like page/post titles.

    I also wanted to clarify what I said earlier about choosing whichever font you like. I learned that not every font can be used. It is best to stick with the options provided in the Customizer or standard fonts available to all browsers. Otherwise, your website may not look the same on different browsers.

    #3018563

    openthehub
    Member

    Dear @joyinco,

    Thank you for your answer.

    As you will see in the front-office, I removed the code:
    .menu {
    font-family: “Futura PT”;},

    Then I tried to set the font and size in Customize > Fonts section.
    Indeed, it changes the other menus titles (“Rubriques” and “Social”) + the title of an article.
    But not the title “Contacts” of the menu… Damn.

    What did I do wrong ?
    Thanks very much for your help

    #3018565

    joyinco
    Member

    Hi hubtvart,

    To change the fonts in the “Contacts” and other menu items, use Customize > Fonts > Base Font.

    The Customize > Fonts > Headings Font is the one that changes the font for widget headings like “Rubriques” and “Social” among other things.

    Let me know if that works for you.

The topic ‘BACK-OFFICE: ARTICLES & FONTS’ is closed to new replies.