Modifying fonts of title, slogan and menu in Oslo theme

  • Unknown's avatar
    mariehigelin · Member ·

    I would like to change the font TYPES and SIZES of my TITLE, SLOGAN, and MENU (I work with the Oslo theme).
    I have no problem modifying the ones related to titles and contents of articles and such, but I’d like to the the same with the above-mentionned.
    Can someone help me?
    Thank you.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    gracejiyoung · Member ·

    Hi Caroline,

    Sure! You can do this if you edit CSS. Please go to Appearance > Customize > CSS and add the following:

    .wf-active #masthead .site-title {
	font-family: omnes-pro,"Roboto","Helvetica","Helvetica Neue","Arial",sans-serif;
	font-size: 40px !important;
}

    This is to change the font and font size of your site title. What I added after font-family was just an example. I used the font you set for your headings. For the font-size, you can change the 40 to any size you want. You can test out the size you want in the Preview. Please leave the “px !important” as is. 

    .wf-active #masthead .site-description {
	font-family: omnes-pro,"Roboto","Helvetica","Helvetica Neue","Arial",sans-serif;
	font-size: 39px;
}

    This changes your site description. Whatever changes you want to make would be the same as the site title.

    #widgets #site-navigation,  {
	font-family: omnes-pro,"Roboto","Helvetica","Helvetica Neue","Arial",sans-serif;
	font-size: 24px;
}

    This changes your menu. Any edits would be the same as above.

    #widgets .widget {
	font-family: omnes-pro,"Roboto","Helvetica","Helvetica Neue","Arial",sans-serif;
	font-size: 24px;
}

    This will change your widget text. This will affect any other widgets you add. If you want it to only affect your Archives Widget please let me know!

    Feel free to reach out if you have any questions!

  • Unknown's avatar
    mariehigelin · Member ·

    Wow. Great.
    Thank you for the answer, Grace (it seems to be your name, I hope I’m right).
    I have to go out right now, but I will make the changes later. I’m excited about it.
    Thanks a million.
    Caroline D.

  • Unknown's avatar
    gracejiyoung · Member ·

    No problem! Feel free to reach back if you run into any issues!

  • Unknown's avatar
    mariehigelin · Member ·

    Are there FONTS that I can’t use in the CSS ?

    For example, can I use FF MARKET for the title of my blog? When I try, it doesn’t work.

    Thank you.

  • Unknown's avatar
    gracejiyoung · Member ·

    If you want just your site title to be FF Market, just add what I gave you above and switch out the font like so:

    .wf-active #masthead .site-title {
	font-family: ff-market-web,"Roboto","Helvetica","Helvetica Neue","Arial",sans-serif;
}

    If you need to know how to input certain fonts, let me know which ones you want to use and I can provide them for you!

    Cheers!

  • Unknown's avatar
    mariehigelin · Member ·

    Grace,
    What do you mean when you say “just add what I gave you above…”

    I need to paste something ahead of what you just gave me?

    I tried pasting the last phrase you supplied, but it doesn’t work… i.e. it changes the title font but not to ff-market.

    Thanks again.

  • Unknown's avatar
    gracejiyoung · Member ·

    Hi there!

    I see what you mean! We are currently looking into this. I see that you recently set the Headings to all FF-Market.

    Is that what you want? If you just want the Site Title to be in FF Market, please let me know!

  • Unknown's avatar
    mariehigelin · Member ·

    I wanted only the title to be in FF Market. I tried in every which way… And it’s not working for me.

    I was also wondering… Do fonts like AMATIC work in WP websites? I would try to use it for the titles of the articles… And even maybe the title of my website… if it works of course!

    Otherwise, if I can make FF Market work for only the title, that would be great. Thanks Grace.

  • Unknown's avatar
    gracejiyoung · Member ·

    Unfortunately it wouldn’t be possible to add fonts to your website for security reasons. At this moment it would be best to keep your headings left at FF Market, and I’ll take a look into making just the site title that font.

    Thank you!

  • Unknown's avatar
    mariehigelin · Member ·

    Thank you Grace. Like I said, I’d be happy if I could use it only for the title… I find it to bold for my articles’ title.
    Thank you again.

  • Unknown's avatar
    gracejiyoung · Member ·

    Hi there,

    Unfortunately after some testing it looks like it’s is not possible. You can keep all the headings as the FF Market font or change them all to Omnes Pro which you had before.

    I’m sorry I couldn’t be of more help!

  • Unknown's avatar
    mariehigelin · Member ·

    Grace,

    What you just did is fine! You modified the titles of the articles in something that looks pretty good, while the tile of the site stayed in FF Market…

    Can’t I leave that way for now?

  • Unknown's avatar
    gracejiyoung · Member ·

    Ok I’m glad you like it! :)

    Yes, leave it as is and you should be set!

  • Unknown's avatar
    mariehigelin · Member ·

    Thank you Grace.
    I’ll leave this topic unresolved for now if you don’t mind…
    I’m looking at the fonts on a couple of other computers, and it’s not as winner as on mine.
    I’ll feel it out for a bit, and get back to you if need be.
    Is that ok?

  • Unknown's avatar
    gracejiyoung · Member ·

    Sounds good. :)

  • The topic ‘Modifying fonts of title, slogan and menu in Oslo theme’ is closed to new replies.