Changing font of site title

  • Unknown's avatar
    poulrohleder · Member ·

    I am using Baskerville 2 site and need to change the font for the site title. The template font is not accessible to people with poor eye-sight or dyslexia. What CSS code to I use to change the font?

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

  • Unknown's avatar
    otpidusprime · Member ·

    Hi there,
    It looks like your site is in private mode, so i cannot view it and give you the exact code.

    But here’s the general idea on how to change the font-size using CSS.
    To change the size of the header text, use the font-size CSS property.
    FOR EXAMPLE:
    Consider there’s a header text with this following HTML code:
    <header>HEADER TEXT</header>

    You can change the size of the header text using the following CSS code: 

    header {
    font-size: 35px;
    font-weight: bold;   // makes the header text bold
}

    Let me know if this helps.

  • Unknown's avatar
    taniametalli · Member ·

    Hi there,

    You can change fonts by clicking on Thmes > Customize > Fonts. No need to change the CSS code.

    Hope it helps.

  • Unknown's avatar
    otpidusprime · Member ·

    @taniametalli
    I thought the question was about changing the font-size.
    I read the question wrong.
    My Bad.

  • Unknown's avatar
    taniametalli · Member ·

    @otpidusprime no problem. I didn’t see your reply, I was typing mine as you were posting yours :)

  • Unknown's avatar
    poulrohleder · Member ·

    Thank you both

    It is not the size I need to change it is the actual font type. On the theme task menu I can only change the font of the headings and texts of posts. What I want to change is the main Site Title. If you look at the Baskerville 2 template. I am talking about the title that appears at the top of the site “Baskerville” in white cursive font. This is not easily readable to those with visual or reading disabilities. Could you help with how I do this using CSS?

    Thanks!

  • Unknown's avatar
    otpidusprime · Member ·

    Well, to do it using CSS you just have to use the font-family property, like this: 

    header {
   font-family: 'Your Font Name'; // change this to your desired font name
}

    If you do not like cursive fonts, then you can go for a sans-serif style font which is easily readable for all.
    Examples of sans-serif fonts are:
    Open Sans
    Lato
    Roboto
    Arial
    etc.

    There are millions of them, select one and change the font using CSS like this: 

    header {
   font-family: 'Lato', sans-serif;
}

    You might wanna check out Google Fonts-they have a huge library of open source sans-serif fonts.

    Let me know if you need help with something more. :)

  • Unknown's avatar
    poulrohleder · Member ·

    Thanks.

    But it does not seem to change anything. Will try and contact the site customer support.

    Thanks anyway

  • Unknown's avatar
    otpidusprime · Member ·

    No Problem. I hope you find the solution soon :)

  • kokkieh · Staff ·

    Hi there,

    You change this by selecting a different font in the Customizer, as @taniametalli said above.

    Click on My Sites, then click the Customize button next to Themes. Click on Fonts. Select a different font under Headings. That will change the font for the site title and all other headings on the site.

    To change only the site title, not all headings, you can use this CSS:

    h1.site-title a {
	font-family: 'Roboto Slab', sans-serif;
}

    That will give the site title the same font as the default heading font on the theme.

    Note that it’s not possible to import new fonts on a WordPress.com site, so you can only use one of the fonts that’s already applied to the theme.

  • Unknown's avatar
    poulrohleder · Member ·

    Thank you, Kokkieh!

    That worked perfectly!

    Many thanks everyone for your prompt help

  • kokkieh · Staff ·

    Glad I could help :)

  • The topic ‘Changing font of site title’ is closed to new replies.