Disable Google Fonts and use a Custom Font

For the Physio WordPress theme.

By default we're using Google Fonts for the typography in the theme. If you prefer to use a custom font you can follow these steps.

Please note that it's recommend to use the child theme because you need to make changes to the functions.php and style.css file. When not using a child theme your changes will be overwritten when you will update the parent theme.

---

1. Add the following line to the bottom of the functions.php file:

/* Remove Google Fonts */
function physio_remove_google_fonts() {
    wp_dequeue_style( 'physio-qt-fonts' );
}
add_action( 'wp_enqueue_scripts','physio_remove_google_fonts', 20 );

2. Upload your font files somewhere on your server, recommend to upload outside the WordPress folder.

3. Add the following CSS to Appearance -> Customize -> Additional CSS:

@font-face {
    font-family: Roboto;
    src: url(http://yourdomain/fonts/Roboto-Regular.ttf);
    font-weight: normal;
}

Make sure to replace the font-family name, in this case "Roboto", to the font you're going to use. Also update the src path to the location of the font file on your server.

Check if the font file is .ttf or .woff and change the extension as well.

4. Now that the font file is loaded you have to use custom CSS to actually change the fonts in the theme to the custom font. You can add the following CSS to Appearance -> Customize -> Additional CSS:

Change the fonts that use the "Nunito" font by default:

h1,
h2,
h3,
h4,
h5,
h6,
.main-navigation > li > a,
.brochure,
.testimonials .testimonial--author,
.call-to-action .call-to-action--content .call-to-action--title,
.counter .counter--text .counter--number {
    font-family: 'Nunito';
}

Change the fonts that use the "Open Sans" font by default:

body,
button,
input,
select,
textarea,
.btn,
.main-navigation .sub-menu li a,
.jumbotron .jumbotron-caption .caption-small-heading,
.page-header--subtitle,
.featured-page .featured-page--image .featured-page--overlay .overlay--center span,
.brochure span,
.news-posts-block .widget-title a,
.panel-group .panel .panel-heading .panel-title a {
    font-family: 'Open Sans';
}

In both CSS snippets make sure to change the font-family name to the name you've set in step 3.