Use php to identify duplicate settings

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:

Read More
$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.

Related posts

1 comment

  1. Assign the fonts to array keys and iterate it.

    $fonts = array(
        get_theme_mod('font_base_family') => 'base',
        get_theme_mod('font_headings_family') => 'headings',
        get_theme_mod('font_nav_family') => 'nav'
    );
    
    foreach ($fonts as $key => $type) { ?>
        <link href='http://fonts.googleapis.com/css?family=<?php echo str_replace(" ", "+", $key); ?>:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
    <?php }
    

Comments are closed.