I am building a wordpress theme, in the theme customizer you can choose Google fonts for the Body Text, Headings and Navbar.
Below shows how I am currently importing the fonts chosen into a custom-css.php file that is called in the head of my page:
$base_font = get_theme_mod('font_base_family');
$headers_font = get_theme_mod('font_headings_family');
$menu_font = get_theme_mod('font_nav_family');
if($base_font !='') { ?>
<link href='http://fonts.googleapis.com/css?family=<?php echo str_replace(" ","+",$base_font );?>:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
<?php } ?>
<?php if ($headers_font != '') { ?>
<link href='http://fonts.googleapis.com/css?family=<?php echo str_replace(" ","+",$headers_font );?>:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
<?php } ?>
<?php if ($menu_font != '') { ?>
<link href='http://fonts.googleapis.com/css?family=<?php echo str_replace(" ","+",$menu_font );?>:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
<?php } ?>
Then later down in my custom-css.php file I have something like this (shortened):
body {
font-family: <?php echo get_theme_mod('font_base_family'); ?>;
}
h1, h2, h3, h4, h5, h6 {
font-family: <?php echo get_theme_mod('font_headings_family'); ?>;
}
#header nav ul li > a, #header nav ul li > span {
font-family: <?php echo get_theme_mod('font_nav_family'); ?>;
}
The issue I have is obviously loading 3 fonts like this, with all the font weights too, drastically increases page load time. If a user wants 3 differents fonts for each, that’s fine, however say they decide to have 2 or 3 of the same fonts, I don’t want to have duplicates in my head.
Say for example then someone wants the same font for Body and Headings, is there a way I can, using php, say “If a is the same as b or c – remove the duplicate”
Hope that makes sense.
Assign the fonts to array keys and iterate it.