[david]

I am trying to upload a custom font I created to be used as the main font for the theme. How can I upload it to ensure it’s added to the dropdown menu in Customize in order to apply it to the whole theme?

[serkan]

Hi, Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:

@font-face {
    font-family: Arvo; 
    src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
    font-weight: normal; 
}

Don’t forget to replace the font-family and URL with your own.
After that you can use that font anywhere in your theme’s stylesheet like this:

body {
font-family: "Arvo", Arial, sans-serif;
}

Thanks

[david]

Thank you! Worked great

[serkan]

You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.

[borisg1992]

Hi Serkan,

I want to change the font to just the homepage text. What code should I use? Where can I access the font family?

Thanks,
Boris

[serkan]

Hi Boris,
You can go to google fonts;
https://fonts.google.com/
And add a font family go to customization and you will see the codes.
You can use this custom css code.
body.home { font-family: ‘Roboto’, sans-serif; }
Also, you can check out this related topic;
http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
Thanks

[borisg1992]

I did exactly what the video suggested – however no change was done in the CSS is there another way?

[borisg1992]

body.home { font-family: ‘Heebo’, sans-serif; } in css, i added the font to the header.php file

[serkan]

Hi, Please go to appearance > customize > custom css box.
You should copy and paste your codes here. Don’t edit the main theme file.
Also you can try to use plugin for this feature.
https://wordpress.org/plugins/use-any-font/
Thanks

[borisg1992]

Hi.. I was able to change the font.. however, the spacing of the font seems to be too close (some letters have no spacing and others have some) How can I fix that? Thanks in advance.

http://www.borisgodin.com

– see homepage (name)

[serkan]

Hi Boris,
This problem is related to the font itself. With custom css code, however, we can create some space between them.

.nav-menu a { letter-spacing: 1px; }

Thanks

[borisg1992]

Oh, not the menu….where it says my name

here
http://tinypic.com/r/rr8m5f/9

[serkan]

Hi Boris,
Could you try to use this custom css code;

@media screen and (min-width: 1400px) { .home-section h2 { letter-spacing: -1px; } }

Thanks

[borisg1992]

Your solution adds more spacing between the letters but it doesn’t fix the error with the font. I changed the font to another one similar and I’m getting the space disproportionate spacing between letters (especially the i ) It appears to be a coded for all h2 text across the titles of the website.

Also – Why did you include a screen width requirement? Then the font spacing only works for certain screen sizes

[serkan]

Hi Boris,
I will forward this issue to our developer and I will keep you updated.
Thanks

[ahmetsali]

Hi, by using this custom css code you can reset the letter spacing to font default;

.home-section h2 {
    letter-spacing: 0;
}

If this still doesn’t look good, it should be because of the font itself.