Page 1 of 1

Logo text

Posted: 08 Sep 2016, 08:53
by winph
Hi,

is it possible to change font weight for the logo 2nd part only? like if my logo is is NamePhotography i want my name to be bold then photography to be normal.

thanks for the update installing now :)

regards.

Re: Logo text

Posted: 08 Sep 2016, 08:58
by mjau-mjau
You should be able to add to settings -> custom -> custom CSS:
Code
a.logo > .m2 {
  font-weight: bold;
}

Re: Logo text

Posted: 08 Sep 2016, 09:10
by winph
thanks

Re: Logo text

Posted: 08 Sep 2016, 10:13
by winph
mjau-mjau wrote:You should be able to add to settings -> custom -> custom CSS:
Code
a.logo > .m2 {
  font-weight: bold;
}
and if i want the 1st part to be lighter can i add...??
Code
a.logo > .m1 {
[color=#003488][size=100][font=monospace]  font-weight: lighter;[/font][/size][/color]
}

Re: Logo text

Posted: 08 Sep 2016, 10:49
by mjau-mjau
winph wrote:and if i want the 1st part to be lighter can i add...??
Code
a.logo > .m1 {
  font-weight: lighter;
}
That would be correct code, but "lighter" does not necessarily change anything depending on the font you are using. Font-weight "normal" is normally 400, and "lighter" would try to set the font to 300, but only if that font-weight exists in your loaded Google fonts. What font combo are you using? To use a lighter font, you would likely need to include a lighter font (settings -> style -> font), and also make sure the Google-font you are using supports a lighter font.

Re: Logo text

Posted: 16 Sep 2016, 03:45
by winph
:)

just curious... how do i change color/font-weight  when on-mouse for the logo text?

Re: Logo text

Posted: 16 Sep 2016, 05:30
by mjau-mjau
winph wrote:just curious... how do i change color/font-weight  when on-mouse for the logo text?
You can't generally change the hover color if you speak of the 3D effect, as this color is calculated by the javascript that creates the effect. You might be able to change font-weight, but that will likely look a bit strange.
Code
a.logo:hover > .m1 {
  font-weight: bold;
}

Re: Logo text

Posted: 17 Sep 2016, 03:47
by winph
i got mixed result...
Code
a.logo > .m1 {
  color: white;
  font-weight: 300;
}

a.logo > .m2 {
  color: white;
  font-weight: 700;
}
macbook / safari (this is what i really want)
Image

imac / safari / chrome & iphone
Image

btw im using same version of safari and os.

is it possible that on my macbook i installed lato font while my imac & mobile doesnt? 

Re: Logo text

Posted: 17 Sep 2016, 10:53
by mjau-mjau
This is likely because of the Google font weights implemented. What's your link? I would like to see what font weights are loaded from Google. Different browsers use different methods to create "bold" versions of fonts if they don't exist. Some browsers will create a faux-bold version of a font, if it can't find an exact fit for the requested boldness.
is it possible that on my macbook i installed lato font while my imac & mobile doesnt? 
Could also be related yes.

Re: Logo text

Posted: 17 Sep 2016, 20:26
by winph
www.sherwintan.com

tried with arial but still same even though i have arial installed :(

Re: Logo text

Posted: 18 Sep 2016, 00:03
by mjau-mjau
You are using font-weights Lato:300,300italic, which does not include any bold fonts. This generally means that the browser will always use faux-bold (fake bold), if it cannot find any 600,700,800,900 weight included in the font. Different browsers may apply their "own" interpretation of bold. From here I see this:

Mac/Chrome


Mac/Firefox


There is a clear a difference how browsers interpret faux-bold. And yes, it could create additional results if you actually have the Google web font installed on your system. We can't generally do anything about this. Browser will render a font as it wants to, if it's not included.

So why is Lato Bold not included?
We did not include a bold variation in "Lato Skinny", because I think the Lato "700" is too bold to be used in <strong> alongside the super-skinny 300, and Lato doesn't have a "600" (like many other web fonts).

You can include the bold font by going to settings -> style -> font, and customizing the first part of the font-string so that it looks like this:
Code
Lato:300,300italic,700
I'm pretty sure that will give a more uniform experience across browsers, as they will use the provided Lato 700 font instead of created a faux-bold.
winph wrote:tried with arial but still same even though i have arial installed :(
This I don't know, but would not be a related issue. Can't reproduce.

Re: Logo text

Posted: 18 Sep 2016, 05:00
by winph
THANKS... SUPER THANKS

This solve this problem!
Code
Lato:300,300italic,700