Different styles/weights of Google fonts « Support Forum | Kriesi.at

Support Forum » Angular

Different styles/weights of Google fonts

10 posts from 5 voices

Started 1 year ago by mako
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

mako
Member

I'd like to change the font for the callout text on the frontpage to a light, italic version of a Google font, Lato:
"Welcome! This is Angular, a very clean, responsive & super flexible WordPress portfolio theme that makes it easy to showcase your work"

I've updated the register-admin-options.php w/ the new Google font Lato I'd like to use, adding the line:
'Lato' => 'Lato',
to the rest of the font list. I'm guessing this single line includes the other font weights like light/bold.

I've also updated the css through the admin 'Quick CSS' textbox to:

#top .callout
{
font-family:Lato;
font-weight: 100;
font-style: italic;
}

In Safari (mac), it seems to replace the correct font, except for the "&" character which is still the default font
In Firefox (mac) it seems to use a regular/bold version instead of the light version (weight 100), with the "&" still rendered in the default font

My question is, what am I doing wrong?

Thanks!

(update: I also cleared cache on the browsers)

Posted 1 year ago #
Dude
Dude

Hey,
can you post a link to your website please. I'd like to check which font files are actually loaded...

Posted 1 year ago #
mako
Member

http://mkostudios.com/xxindex.php/

I actually seemed to have fixed it by setting the Theme Options/Styling/Heading Font/ to "no custom font" then adding the following in the Quick CSS:

.logo img
{
margin-top:-50pt;
}

.special_amp
{
font-family:Lato;
font-weight: 100;
font-style: italic;
}

.title_container h1
{
font-family:Lato;
font-weight: 100;
font-style: italic;
}

#top .callout
{
font-family:Lato;
font-weight: 100;
font-style: italic;
}
#top .logo
{
text-align:left;
}

Posted 1 year ago #
mako
Member

To add on to the above, I've looked at the site on the iPhone and it seems it doesn't render the Lato font for the callout text - it's renders a default font or 'no custom font'.

Posted 1 year ago #
Kriesi
Key Master
the & has a special class in base.css:
```
.special_amp {
font-family: "Baskerville", "Palatino Linotype", "Palatino", "Times New Roman", serif;
font-style: italic;
}
```
if you remove the font family it will render the same way as the google font. I will have a look at the iphone font problem, not sure why it doesnt render the lato font correctly
Posted 1 year ago #
mako
Member

I've resolved this by adding in the @import line in the custom.css and placing the font names in quotes:
font-family:'Lato';

instead of
font-family:Lato;

Seems to have fixed Mobile Safari issue

Posted 1 year ago #
Dude
Dude

Glad that you solved the issue. Status set to resolved.

Posted 1 year ago #
Urshikka
Member

Hello! This also bothers me a lot but I don't know how to code. Could you please give me detailed instructions how to fix this problem with "&" character?

Thank you for your help.

Urshikka

Posted 1 month ago #
Urshikka
Member

Hi Guys, I am sorry, I just realized that I had some weird plugin active that was doing that.
So all good :)

Posted 1 month ago #
Ismael
Moderator

Hey,

Glad it is all fixed.

Regards,
Ismael

Posted 1 month ago #