I'm developing a Wordpress theme and I added some options in order to change the font-family using a page of options. What I did is to add this link in the header.php:
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_stylesheet_directory_uri(); ?>/custom-style.php" />
This file contains this code:
<?php
require_once( dirname(__FILE__) . '../../../../wp-config.php');
require_once( dirname(__FILE__) . '/functions.php');
header('Content-type: text/css');
header('Expires: ' . gmdate( "D, d M Y H:i:s", time() + $expires_offset ) . ' GMT');
header("Cache-Control: public, max-age=$expires_offset");
?>
body{font-family:"<?php echo get_option('szt_fonts_body', 'Open Sans'); ?>"}
h1,h2,h3,h4,h5,h6,.hdunderline,#comments,.headlinepg,.headline,.headlinesitemap,.headline404,.headlinecontact{font-family:"<?php echo get_option('szt_fonts_heading', 'Oswald'); ?>"}
#logo .headertext a{font:<?php echo get_option('szt_fsize_logo', '2em'); ?> "<?php echo get_option('szt_fonts_logo', 'Michroma'); ?>"}
#logo .headertext{margin-top:<?php echo get_option('szt_margin_logo', '3px'); ?>}
The problem is this method reduces the load speed. With this code, the load speed increases from 600 miliseconds to 2.5-3 seconds. My question is: WHY? It's not a lot of code, so I don't understand the reason for that.
I'd like to find a solution on it. I know I can add the CSS code in the header.php as an alternative, but I would like to have a solution with separated code, CSS in one side and HTML in another side. What should I do?
Solved: It seems it was loading the Wordpress core twice. So I decided to don't use this file. I added the dinamic CSS in the header.php file. Anyway, I wonder if it'd be better to put that code in the header.php or in functions.php as a function (it's a code used in all pages).