binarymoon

<p>Quickly and easily edit fonts and colors in your WordPress themes using the WordPress Customizer so that you can get live previews before saving the new settings.</p>
<p>Perfect for giving your website a unique look without having to hire a designer or make code changes yourself.</p>
<p>All default WordPress themes are fully supported and support for more themes will be added in the future. All other themes can customize fonts.</p>
<p>Styleguide uses a carefully chosen selection of the top 45 Google Fonts to give you a lot of options for personalising your site.</p>
<h4>Features</h4>
<ul>
<li>Choose from a varied selection of the top Google fonts in any theme</li>
<li>Additional themes (listed below) support editing colors</li>
<li>Filter fonts based on character set – great for non latin languages such as Russian</li>
<li>Developer functionality for adding support to other themes, and for adding additional fonts.</li>
</ul>
<h4>Supported Character Sets</h4>
<p>Styleguide supports fonts that have a variety of different character sets. This makes selecting a font for your language super easy. The supported character sets are:</p>
<ul>
<li>Cyrillic</li>
<li>Devanagari</li>
<li>Greek</li>
<li>Hebrew</li>
<li>Latin</li>
<li>Vietnamese</li>
</ul>
<p>By default Styleguide uses Latin. To limit the font choice to those supporting your character set you should go to <em>Settings → General → Character Set</em> and select your set there.</p>
<h4>Supported Themes</h4>
<ul>
<li><a href="https://wordpress.org/themes/kent" rel="ugc">Kent</a></li>
<li><a href="https://wordpress.org/themes/bromley" rel="ugc">Bromley</a></li>
<li><a href="https://prothemedesign.com/theme/romero/" rel="nofollow ugc">Romero</a></li>
<li><a href="https://prothemedesign.com/theme/puzzle/" rel="nofollow ugc">Puzzle</a></li>
<li><a href="https://prothemedesign.com/theme/chronicle/" rel="nofollow ugc">Chronicle</a></li>
<li><a href="https://prothemedesign.com/theme/broadsheet/" rel="nofollow ugc">Broadsheet</a></li>
<li><a href="https://prothemedesign.com/theme/lens/" rel="nofollow ugc">Lens</a></li>
<li><a href="https://prothemedesign.com/theme/monet/" rel="nofollow ugc">Monet</a></li>
<li><a href="https://prothemedesign.com/theme/mimbopro/" rel="nofollow ugc">Mimbo Pro</a></li>
<li><a href="https://prothemedesign.com/theme/opti/" rel="nofollow ugc">Opti</a></li>
<li><a href="https://themetry.com/shop/adaline/" rel="nofollow ugc">Adaline</a></li>
<li><a href="https://wordpress.org/themes/twentyten" rel="ugc">Twenty Ten</a></li>
<li><a href="https://wordpress.org/themes/twentyeleven" rel="ugc">Twenty Eleven</a></li>
<li><a href="https://wordpress.org/themes/twentytwelve" rel="ugc">Twenty Twelve</a></li>
<li><a href="https://wordpress.org/themes/twentythirteen" rel="ugc">Twenty Thirteen</a></li>
<li><a href="https://wordpress.org/themes/twentyfourteen" rel="ugc">Twenty Fourteen</a></li>
<li><a href="https://wordpress.org/themes/twentyfifteen" rel="ugc">Twenty Fifteen</a></li>
<li><a href="https://wordpress.org/themes/twentysixteen" rel="ugc">Twenty Sixteen</a></li>
</ul>
<p>Developers can add support for their themes quite easily – see the ‘Other Notes’ tab for more info.</p>
<p>If you’re in the market for a WordPress theme then you could check out my Premium GPL WordPress themes site here: https://prothemedesign.com/</p>
<h3>How To</h3>
<p>After downloading and installing the plugin you can go to the Customizer (Appearance > Customizer) and edit fonts and colors in the ‘Colors & Fonts’ panel.</p>
<h4>Adding Theme Support</h4>
<p>Styleguide allows any theme to add support through the <code>add_theme_support</code> command. For examples check out the theme-styles directory.</p>
<p>I have added an example of a basic implementation below. This code would be placed in your themes functions.php</p>
<pre><code>function prefix_add_styleguide_support() {

  // for properties check out the included theme styles as seen here:
  // https://github.com/BinaryMoon/styleguide/tree/master/theme-styles
  $properties = array(
    ...
  );
  add_theme_support( 'styleguide', $properties );

}

add_filter( 'after_setup_theme', 'prefix_add_styleguide_support' );
</code></pre>
<h4>Extra Fonts</h4>
<p>Styleguide currently offers developers a filter for adding additional fonts. You can use it as shown below</p>
<pre><code>function my_fonts( $font_list ) {
    $font_list['Cormorant Infant'] = array(
        'name' => 'Cormorant Infant',
        'family' => '"Cormorant Infant", serif',
        'weight' => '400,700',
        'sets' => array( 'latin' ),
    );
    $font_list['Poppins'] = array(
        'name' => 'Poppins',
        'family' => 'Poppins, sans-serif',
        'weight' => '400,700',
        'sets' => array( 'latin' ),
    );
    return $font_list;
}
add_filter( 'styleguide_get_fonts', 'my_fonts' );
</code></pre>


Styleguide – Custom Fonts and Colors

Styleguide allows you to customize fonts and colors in WordPress themes through the Customizer - no need to touch any code!

demetris (Demetris Kikizas)

joshix

<p>Tangofy does 3 things:</p>
<ul>
<li>Replaces the menu icons in the administration area of WordPress 2.7 with better, <em>more helpful</em> icons.  Either an included set—2 Fugue sets, 1 Silk, 2 Tango—or your own!</li>
<li>Dispenses with Black & White icons.  All link states have full colour.</li>
<li>Hides the large 32×32 icons.  (Or shows them, if you prefer.)</li>
</ul>
<p>The Tango sets use icons from 4 different projects:  GIMP, GNOME, Pidgin and Tango.  Silk uses Silk Icons.  Fugue uses Fugue Icons.</p>
<ul>
<li><a href="http://ftp.gnome.org/pub/GNOME/desktop/" rel="nofollow ugc">ftp.gnome.org/pub/GNOME/desktop</a></li>
<li><a href="http://gimp.org/" rel="nofollow ugc">gimp.org</a></li>
<li><a href="http://pidgin.im/" rel="nofollow ugc">pidgin.im</a></li>
<li><a href="http://tango.freedesktop.org/" rel="nofollow ugc">tango.freedesktop.org</a></li>
<li><a href="http://www.famfamfam.com/lab/icons/silk/" rel="nofollow ugc">www.famfamfam.com/lab/icons/silk</a> (Silk Icons)</li>
<li><a href="http://www.pinvoke.com/" rel="nofollow ugc">www.pinvoke.com</a> (Fugue Icons)</li>
</ul>
<p>Tangofy speaks 6 languages:</p>
<ul>
<li>English (default)</li>
<li>Greek (by Demetris)</li>
<li>Polish (by x600)</li>
<li>Portuguese (Brazilian) (by <a href="http://www.fernandolopes.com.br/" title="[fernandolopes.com.br]" rel="nofollow ugc">Fernando Lopes</a>)</li>
<li>Spanish (by <a href="http://www.federicobond.com.ar/" title="[federicobond.com.ar]" rel="nofollow ugc">Federico Bond</a>)</li>
<li>Turkish (by <a href="http://www.wpuzmani.com/" title="[wpuzmani.com]" rel="nofollow ugc">Semih Aksu</a>)</li>
</ul>
<p>Tangofy by <a href="http://op111.net/" title="Everything about anything. Or, a website about technology, the Web and web publishing  [op111.net]" rel="nofollow ugc">Demetris Kikizas</a> and <a href="http://joshix.com/" title="Personal homepage of Josh Wood  [joshix.com]" rel="nofollow ugc">Josh Wood</a> is published under the <a href="http://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GNU General Public Licence</a>, as are the GIMP, GNOME and Pidgin icons.  Icons from the Tango Base Library are published under the <a href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow ugc">Creative Commons Attribution-Share Alike 2.5</a> licence.  Silk Icons are under the <a href="http://creativecommons.org/licenses/by/2.5/" rel="nofollow ugc">Creative Commons Attribution 2.5</a> licence.  Fugue Icons are under the <a href="http://creativecommons.org/licenses/by/3.0/" rel="nofollow ugc">Creative Commons Attribution 3.0</a> licence.</p>


Styleguide – Custom Fonts and Colors vs Tangofy