author custom color, font, size

[Nikos]

hi,
i would like to ask, how can i customize the author name, when we click on it and we go to the archive page of his.
on the top, appears the name, with black font. i would like to change the font, the size, the color so it will differ from the posts underneath.
i have found some topics related but because i didn’t understand 100% i thought to ask here first so i will not make any mistake 🙂
maybe we can do it also from the colors in the wordpress customizations but again there were many options and i didn’t want to touch anything that i don’t understand what they do.
thank you !!

[David]

Hi there,

you can use some CSS to style the page-header container and the font – here for example:

/* Set header background and text colors with padding */
.author .page-header {
  padding: 10px;
  background: #000;
  margin-bottom: 80px;
  color: #fff;
}
/* Set font size and weight of author H1 */
.author .page-header h1 {
    font-size: 80px;
    font-weight: 700
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nikos]

very good!!!! 🙂
but i still face a little problem: if i understood correctly, the font type will be h1. i changed it to h6.
then i went to customizing-typography and i changed the default font there to a font i like.
but whatever font i choose for h6, i always get the same result (you can see it at the example i sent before)
did i forget or didn’t notice something? 🙂
thank you

ps. i choose for h6 one of the google fonts

[David]

The archive title is always a H1 – theres no option in the theme to change that to a different H* – that would require code…. so i am not sure what you’re changing ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nikos]

i didn’t know that 🙂 so is not possible to change the font of the author in the top of the archive?
thank you

[David]

You can, if you have selected the font you want to use for the H6 then GP will load that font.
You can then update the second CSS rule to use that font:

.author .page-header h1 {
    font-size: 80px;
    font-weight: 700
    font-family: "your-font-name", serif;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nikos]

i changed the code to the absolute necessary:
.author .page-header h1 {
color: #2D6DF4;
font-size: 50px;
font-weight: 700
font-family: “Pacifico”, serif;
}
but nothing changes in the font family
(if i change the h1 font, in customizer, typography, i can get what i want-the problem is that all the h1 change 🙂 )
so in our example i would like the name of the authors to be written with pacifico font
thank you !!

[Ying]

Hi Nikos,

The issue that font-family doesn’t work is because you are using the wrong " .

Try to replace “ ” with " ":
font-family: "Pacifico", serif;

Let me know 🙂

[Nikos]

hi ying!
i just copied david’s code and paste it 🙂 i didn’t change the “”
i have an english usa keyboard. i just press shift+’ to get the ”
i don’t have any other ones.
but if you think my computer character codepage is not the right one, can you give me the ascii code of the correct ” ?
so i will type it with alt 🙂
thank you

[Ying]

I hope this is helpful:
https://www.screencast.com/t/lMDwIKYNfjI
https://www.ascii-code.com/

[Nikos]

yes no34 🙂 this is what i was using also 🙂 but to be double sure, i alt34ed it in both sides of pacifico fonts. the same result.
another thought. do i have pacifico google font installed? how can i check it?
or it comes together with every wordpress installation?
i decided to use this font by checking in the customizer-typography of generatepress. there are some google fonts listed. i thought they are installed in my system. or maybe they are not?
thank you

[Ying]

I checked your site again, I found this issue in format:
https://www.screencast.com/t/hfBPc7WlkC

There’s a;missing after 700.

[Nikos]

yes there was a missing ;
but even if i corrected the ; again i could not see the font
i … googled it and the reason was what i have written before. the font was not inside my website.
i searched in google fonts and i found the code missing (i also liked the Satisfy font more)
so the css snippet is like that:

@import url(‘https://fonts.googleapis.com/css2?family=Satisfy&display=swap’);
.author .page-header h1 {
color: #2D6DF4;
font-size: 50px;
font-weight: 700;
font-family: “Satisfy”, cursive;
}
of course i don’t know if there is a safety issue or if the website breaks in case the link to fonts.googleapis.com url gets lost
thank you !!!

[Elvin]

Hi there,

If I may suggest, try adding the font this way:

Create a Hook Element.
https://docs.generatepress.com/article/hooks-element-overview/

Set the hook to wp_head and set the display rule to Entire Site.

You then add this code:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">

And add your styling to Appearance > Customize > Additional CSS.

.author .page-header h1 {
color: #2D6DF4;
font-size: 50px;
font-weight: 700;
font-family: 'Satisfy', cursive;
}

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

[Nikos]

thanks elvin !! i did it the way you said.
but this … generated 2 new questions:

1. some wise men here in the forums said not to use the appearance/customize/additional css because in every update of generatepress i will lose it.
so i used the snippet plugin. it works, so it is ok yes?
(i don’t use child themes yet because even if i read the instructions in the documentation section, i didn’t understand 100% how it works)

2. in the documentation i read also how to add locally a font. does it have any significant advantage over the link way?
i think i understood quiet well how to add the font locally so i could do it even if it is more complex. but only if i gain something. otherwise i am ok with your way 🙂

thank you !!

[Author]

Posts