I spent some time diving into Twenty Seventeen in preparation to develop for the theme directory. I was curious as to how the developers of very popular theme would enqueue a Google Font. I am no stranger to using a @import tag in the stylesheet, but I assumed there had to be a more sustainable solution. What I found was a thoughtful way of adding a font which I have digested into a gist below.
Handling your Google Fonts in this manner allows translators of your theme to disregard a font that may hinder the translation.
| /** | |
| * Register custom fonts. | |
| */ | |
| function themeslug_fonts_url() { | |
| $fonts_url = ''; | |
| $fonts = array(); | |
| $subsets = 'latin,latin-ext'; | |
| /* | |
| * Translators: If there are characters in your language that are not supported | |
| * by Oswald, translate this to 'off'. Do not translate into your own language. | |
| */ | |
| if ( 'off' !== _x( 'on', 'Oswald font: on or off', 'themeslug' ) ) { | |
| $fonts[] = 'Oswald:400,700'; | |
| } | |
| /* | |
| * Translators: If there are characters in your language that are not supported | |
| * by Montserrat, translate this to 'off'. Do not translate into your own language. | |
| */ | |
| if ( 'off' !== _x( 'on', 'Montserrat font: on or off', 'themeslug' ) ) { | |
| $fonts[] = 'Montserrat:400,700'; | |
| } | |
| if ( $fonts ) { | |
| $fonts_url = add_query_arg( array( | |
| 'family' => urlencode( implode( '|', $fonts ) ), | |
| 'subset' => urlencode( $subsets ), | |
| ), 'https://fonts.googleapis.com/css' ); | |
| } | |
| return esc_url_raw( $fonts_url ); | |
| } | |
| /** | |
| * Enqueue scripts and styles. | |
| */ | |
| function themeslug_scripts() { | |
| // Add custom fonts, used in the main stylesheet. | |
| wp_enqueue_style( 'themeslug-fonts', themeslug_fonts_url(), array(), null ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'themeslug_scripts' ); |
If you are in a similar position as I am, trying to sharpen your WordPress skillset, I highly recommend tearing into some of the default themes. They are a plethora of knowledge.