How to change font?

Hello there,

I downloaded a free web font and I want to use it in my website, since I used it in my site’s logo. How can I do this? Do I need to upload the font to my website?

Thank you,
Francisco

In Sydney’s documentation you have a tutorial to change fonts using google fonts. The font I want to use is not a google font. How can I use it in the site?

Hello there,

Thank you for getting in touch here.

Please try to do the following steps.

  1. Install and activate Sydney child theme

  2. Open Sydney child folder, then create a new folder namely “font-face” to store your font files. So, you should have sydney-child/font-face

  3. Open the `sydney-child/style.css file, then add the following code:


@font-face {
  font-family: "MyWebFont";
  src: url('font-face/my_webfont.eot');
  src: url('font-face/my_webfont.eot?#iefix') format('embedded-opentype'),
       url('font-face/my_webfont.woff') format('woff'),
       url('font-face/my_webfont.ttf') format('truetype');
}
body,
#mainnav ul ul a{
  font-family: "MyWebFont", sans-serif;
}

You should adjust the font name (“MyWebFont”) and the file name (my_webfont.otf) into yours.

For more comprehensive information about how to use CSS3 @font-face, please see here and here.

  1. Save changes, then install and activate the child theme

Regards,
Kharis

This step:
2. Open Sydney child folder, then create a new folder namely “font-face” to store your font files. So, you should have sydney-child/font-face

How do I do this? where do I open child theme folder to upload my font files?.. I’m just lost with this, sorry

Ok, I think i figured this one out: I’m on my cPanel’s file manager adding a folder named “font-face” inside the child theme’s folder. Since I installed wordpress, I never had to visit my cPanel again, so I know very little about it and that was the problem for me here

This worked! But only in the body text. Do I have to inspect each text element and add new code for that in my stylesheet to have the whole site in the same font?

Hello there,

To change the font family on other elements which normally can be set through Appearance > Customize > Fonts > Headings Fonts, try to apply the following CSS code:

h1, h2, h3, h4, h5, h6, #mainnav ul li a, .portfolio-info, .roll-testimonials .name, .roll-team .team-content .name, .roll-team .team-item .team-pop .name, .roll-tabs .menu-tab li a, .roll-testimonials .name, .roll-project .project-filter li a, .roll-button, .roll-counter .name-count, .roll-counter .numb-count button, input[type="button"], input[type="reset"], input[type="submit"] { 
  font-family: "MyWebFont", sans-serif;
}

If nothing changes on particular element, you would find its element selector.

Regards,
Kharis

Hey Kharis, this worked perfectely, but only on desktop version. On mobile it still has the previous theme font. Is there a way to fix this?

Thank you,
Francisco

Dear Fransisco,

Clear your web browser’s cache then try again.

Regards,
Kharis

I already did that but nothing changed… any idea why this is happening?

Hello there,

Please try to add !important argument. So your code will look like this:


body,
#mainnav ul ul a{
  font-family: "MyWebFont", sans-serif !important;
}

h1, h2, h3, h4, h5, h6, #mainnav ul li a, .portfolio-info, .roll-testimonials .name, .roll-team .team-content .name, .roll-team .team-item .team-pop .name, .roll-tabs .menu-tab li a, .roll-testimonials .name, .roll-project .project-filter li a, .roll-button, .roll-counter .name-count, .roll-counter .numb-count button, input[type="button"], input[type="reset"], input[type="submit"] { 
  font-family: "MyWebFont", sans-serif !important;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Added the !important argument, still no changes on mobile

If possible, could you please share your site’s URL here, so I can have a closer look?

Regards,
Kharis

vilalouro.pt

Hello there,

Thank you for sharing it. The issue seemed to be inconsistent. This is what I am seeing http://awesomescreenshot.com/06e5ynlu70.

Regards,
Kharis

That’s what it is supposed to look like… I’m lost here, I’ve cleared my browser’s cache over and over again and refreshed the page a lot of times and it always loads the theme’s previous font instead of the one I chose. I even downloaded a new web browser to my smartphone to load the site on a different browser and it still loads with the wrong font. Can´t understand what’s happening

Just tested it on a tablet and the fonts are also all wrong

Hello there,

Please try on other network. There might be a network cache.

Regards,
Kharis

Just tried it on my smartphone’s 3G network and still has the font issue. When I get the chance I’ll try it with another wi-fi network

Hello kharis,
Today i tried loading the site from my smartphone and from another smartphone on a different network and the fonts in the site are still wrong… any idea on how to solve this?

Thanks,
Francisco