[riccrom123]

Hello,
how can I change the menu font? I would like to use a google font (Abel).

fabricfoto.it/testcatchevolution

[Mahesh]

Hi @riccrom123,

Go to “Dashboard=> Appearance=> Theme Options=> Custom CSS” box and add the following CSS:

@font-face {
    font-family: "Abel";
    font-style: normal;
    font-weight: 400;
    src: local("Abel"), local("Abel-Regular"), url("https://fonts.gstatic.com/s/abel/v6/_c5D7Wxu-NSk4vT8jUYrkQ.woff") format("woff");
}
  
#header-menu ul.menu a {
    font-family: Abel;
    font-size: 15px;
}

Regards,
Mahesh

[riccrom123]

Thank you Mahesh!

[Mahesh]

Hi @riccrom123,

Thank you for your appreciation.
Have a nice day!

Regards,
Mahesh

[FridaSofia85]

Hi!

I want to use some google fonts on my site (Amatic for the menu for example) how can I do that?

I’ve tried this suggestion from Mahesh but I doesn’t get it, where do I get that link?

I’ve also tried the “traditional way”, putting this code in the head-tag:
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>

And this in the custom css:

#header-menu ul.menu a { 
	font-family: 'Amatic SC', cursive;
	font-weight: 700;
	font-size: 16px;
}

But it doesn’t seem to work…?

Thanks!
/Frida

[Mahesh]

@fridasofia85: Please post in your site URL.

Regards,
Mahesh

[FridaSofia85]

It’s http://fridasofia.se/x/
(later on it will be only fridasofia.se )

/Frida

[Mahesh]

@fridasofia85: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and the following CSS:

@font-face {
    font-family: "Amatic SC";
    font-style: normal;
    font-weight: 400;
    src: local("Amatic SC"), local("AmaticSC-Regular"), url("https://fonts.gstatic.com/s/amaticsc/v8/6UByihrsVPWtZ99tNMIgMBJtnKITppOI_IvcXXDNrsc.woff2") format("woff2");
    unicode-range: U+100-24F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
#header-menu ul.menu a {
      font-family: 'Amatic SC', sans-serif;
}

Regards,
Mahesh

[FridaSofia85]

Thank you so much!

I would also like to use “Indie Flower” for Headers (both blog posts and pages) and “Roboto” for paragraphs (both are google fonts)

That’s it, and then I’m pretty much done with the layout. Maybe some minor color adjustments for fonts, but that I can do on my own 🙂

/Frida

[Mahesh]

@fridasofia85: For that add the following CSS in Custom CSS box:

@font-face {
    font-family: "Indie Flower";
    font-style: normal;
    font-weight: 400;
    src: local("Indie Flower"), local("IndieFlower"), url("https://fonts.gstatic.com/s/indieflower/v8/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2") format("woff2");
    unicode-range: U+0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

#content .entry-title {
    font-family: "Indie Flower", sans-serif;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    src: local("Roboto Light"), local("Roboto-Light"), url("https://fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2") format("woff2");
    unicode-range: U+460-52F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

#content .entry-content {
    font-family: "Roboto", sans-serif;
}

Note: You have a missing closing curly brace (}) at the end of the Custom CSS, please put a } before add the above CSS.

Regards,
Mahesh

[FridaSofia85]

Thanks a lot @Mahesh!

[Author]

Posts