Title: Styleguide &#8211; Custom Fonts and Colors
Author: binarymoon
Published: <strong>جنوری 10, 2015</strong>
Last modified: جنوری 30, 2024

---

پلگ انز تلاش کریں

![](https://ps.w.org/styleguide/assets/banner-772x250.png?rev=2524002)

یہ پلگ ان **ورڈپریس کے تازہ ترین 3 ریلیزوں کے ساتھ ٹیسٹ نہیں کیا گیا ہے**۔ اب یہ
برقرار نہیں رکھا جا سکتا یا معاونت نہیں کی جا سکتی اور اس کو ورڈپریس کے تازہ ترین
ورژنز کے ساتھ استعمال کیے جانے پر مطابقت کے مسائل ہو سکتے ہیں۔

![](https://ps.w.org/styleguide/assets/icon-128x128.png?rev=2524002)

# Styleguide – Custom Fonts and Colors

 منجانب [binarymoon](https://profiles.wordpress.org/binarymoon/)

[ڈاؤن لوڈ کریں](https://downloads.wordpress.org/plugin/styleguide.zip)

 * [تفصیلات](https://ur.wordpress.org/plugins/styleguide/#description)
 * [جائزے](https://ur.wordpress.org/plugins/styleguide/#reviews)
 * [ڈیولپمنٹ](https://ur.wordpress.org/plugins/styleguide/#developers)

 [معاونت](https://wordpress.org/support/plugin/styleguide/)

## تفصیل

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.

Perfect for giving your website a unique look without having to hire a designer 
or make code changes yourself.

All default WordPress themes are fully supported and support for more themes will
be added in the future. All other themes can customize fonts.

Styleguide uses a carefully chosen selection of the top 45 Google Fonts to give 
you a lot of options for personalising your site.

#### Features

 * Choose from a varied selection of the top Google fonts in any theme
 * Additional themes (listed below) support editing colors
 * Filter fonts based on character set – great for non latin languages such as Russian
 * Developer functionality for adding support to other themes, and for adding additional
   fonts.

#### Supported Character Sets

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:

 * Cyrillic
 * Devanagari
 * Greek
 * Hebrew
 * Latin
 * Vietnamese

By default Styleguide uses Latin. To limit the font choice to those supporting your
character set you should go to _Settings → General → Character Set_ and select your
set there.

#### Supported Themes

 * [Kent](https://wordpress.org/themes/kent)
 * [Bromley](https://wordpress.org/themes/bromley)
 * [Romero](https://prothemedesign.com/theme/romero/)
 * [Puzzle](https://prothemedesign.com/theme/puzzle/)
 * [Chronicle](https://prothemedesign.com/theme/chronicle/)
 * [Broadsheet](https://prothemedesign.com/theme/broadsheet/)
 * [Lens](https://prothemedesign.com/theme/lens/)
 * [Monet](https://prothemedesign.com/theme/monet/)
 * [Mimbo Pro](https://prothemedesign.com/theme/mimbopro/)
 * [Opti](https://prothemedesign.com/theme/opti/)
 * [Adaline](https://themetry.com/shop/adaline/)
 * [Twenty Ten](https://wordpress.org/themes/twentyten)
 * [Twenty Eleven](https://wordpress.org/themes/twentyeleven)
 * [Twenty Twelve](https://wordpress.org/themes/twentytwelve)
 * [Twenty Thirteen](https://wordpress.org/themes/twentythirteen)
 * [Twenty Fourteen](https://wordpress.org/themes/twentyfourteen)
 * [Twenty Fifteen](https://wordpress.org/themes/twentyfifteen)
 * [Twenty Sixteen](https://wordpress.org/themes/twentysixteen)

Developers can add support for their themes quite easily – see the ‘Other Notes’
tab for more info.

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/

### How To

After downloading and installing the plugin you can go to the Customizer (Appearance
> Customizer) and edit fonts and colors in the ‘Colors & Fonts’ panel.

#### Adding Theme Support

Styleguide allows any theme to add support through the `add_theme_support` command.
For examples check out the theme-styles directory.

I have added an example of a basic implementation below. This code would be placed
in your themes functions.php

    ```
    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' );
    ```

#### Extra Fonts

Styleguide currently offers developers a filter for adding additional fonts. You
can use it as shown below

    ```
    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' );
    ```

## اسکرین شاٹس

 * [[
 * An example of Twenty Eleven having it’s fonts changed
 * [[
 * Twenty Thirteen with some alternate colors

## جائزے

![](https://secure.gravatar.com/avatar/dd3cff86ce7a39594c47e5a9a37bffd1e5faa657e6fc634c2a49a1d9b6fb97fa?
s=60&d=retro&r=g)

### 󠀁[Fantastic little plugging well done](https://wordpress.org/support/topic/fantastic-little-plugging-well-done/)󠁿

 [Tony Fitzpatrick80](https://profiles.wordpress.org/adambrown82/) اکتوبر 17, 2018

There is only one font that works on my WordPress from this plugging but it’s all
I need as it has made the whole fonts on my site much more appealing and classy 
to look at. More importantly, it hasn’t altered the performance of my site. Great
work!

![](https://secure.gravatar.com/avatar/a3637d955a989aba5929bae29ae4b50fc8cc07562d97290d3d99b9e72c87bcfc?
s=60&d=retro&r=g)

### 󠀁[works fine on customizr theme](https://wordpress.org/support/topic/works-fine-on-customizr-theme/)󠁿

 [vanzillatwenty](https://profiles.wordpress.org/vanzillatwenty/) جون 5, 2018

Although it is not on the list of supported themes it does work. It is useful to
check font changes on the fly – I have the free version of customizr which is all
i need and this was an easier fashion to check out more fonts, since the ones it
comes with is limited.

![](https://secure.gravatar.com/avatar/c1a8808a4fe83859d9d5bb96b2cd603d91392bc6525428e0b660cff45cf9c550?
s=60&d=retro&r=g)

### 󠀁[works](https://wordpress.org/support/topic/works-1200/)󠁿

 [](https://profiles.wordpress.org/grueni62/) فروری 13, 2017

came across the plugin as I’m using MONET from the same developer. Obviously integration
is great there, and a huge plus is a very reachable, quickly responding and very
helpful support !

![](https://secure.gravatar.com/avatar/52b2dd7b33e26cf9f3ed3b1ea8d3e77ec134424509c29f82aca6bf9b3dc96705?
s=60&d=retro&r=g)

### 󠀁[Does what it says on the box](https://wordpress.org/support/topic/does-what-it-says-on-the-box-27/)󠁿

 [SecretaryESVGA](https://profiles.wordpress.org/secretaryesvga/) ستمبر 3, 2016

Author very responsible to queries. Works well no problems. I’d like more fonts 
but hey can’t have everything.

![](https://secure.gravatar.com/avatar/6096709beb8390e6e92b60cc7a8732efa2bc1ebdd334eb60d070de77416bd4f6?
s=60&d=retro&r=g)

### 󠀁[Perfect.](https://wordpress.org/support/topic/perfect-2381/)󠁿

 [Alan Marsham](https://profiles.wordpress.org/alanmarsham/) ستمبر 3, 2016

Does what it says. Saves me changing code when i can just do it in the Site Settings.
Its great for tweeking colours. Perfect.

![](https://secure.gravatar.com/avatar/cb6460c9663144741ed9af7807a9b712ce1352d673024d93ff3b86cfedcb50d4?
s=60&d=retro&r=g)

### 󠀁[Easy Peasy Fonts](https://wordpress.org/support/topic/easy-peasy-fonts/)󠁿

 [Brent Logan](https://profiles.wordpress.org/blogan/) ستمبر 3, 2016

Styleguide makes it easy to use Google web fonts on your WordPress site. If you’re
using one of the supported themes, I recommend it.

 [ تمام 7 جائزے پڑھیں ](https://wordpress.org/support/plugin/styleguide/reviews/)

## شراکت دار اور ڈیویلپرز

“Styleguide – Custom Fonts and Colors” اوپن سورس سافٹ ویئر ہے۔ مندرجہ ذیل لوگوں 
نے اس پلگ ان میں حصہ لیا:

شراکت دار

 *   [ binarymoon ](https://profiles.wordpress.org/binarymoon/)

“Styleguide – Custom Fonts and Colors” کا 3 زبانوں میں ترجمہ کیا گیا ہے۔ تعاون کے
لیے [مترجمین](https://translate.wordpress.org/projects/wp-plugins/styleguide/contributors)
کا شکریہ۔

[“Styleguide – Custom Fonts and Colors” کا اپنی زبان میں ترجمہ کریں۔](https://translate.wordpress.org/projects/wp-plugins/styleguide)

### ڈویلپمینٹ میں دلچسپی ہے؟

[کوڈ براؤز کریں](https://plugins.trac.wordpress.org/browser/styleguide/)، [ایس این وی ریپوزیٹری](https://plugins.svn.wordpress.org/styleguide/)
کو چیک کریں یا [ڈویلپمینٹ لاگ](https://plugins.trac.wordpress.org/log/styleguide/)
کو سبسکرائب کریں بذریعہ [آر ایس ایس](https://plugins.trac.wordpress.org/log/styleguide/?limit=100&mode=stop_on_copy&format=rss)۔

## چینج لاگ

#### 1.8.1

 * Improve theme support.
 * Improve coding standards, and fix potential XSS issues.

#### 1.8

 * Add support for Bromley theme.
 * Optimize colour contrast calculations.
 * Improve text contrast for improved accessibility.

#### 1.7.2

 * Fix Puzzle theme styles based on recent theme changes.

#### 1.7.1

 * Tested with the latest version of WordPress.
 * Add support for Carmack theme.
 * Add Nunito and Nunito Sans fonts.

#### 1.7

 * Add support for Romero theme
 * Improve coding standards
 * Scroll selected font into view when first opening the customizer to make it easier
   to see what is currently being used.
 * Tweak customizer styles

#### 1.6.1

 * More tweaks to Chronicle
 * Add support for TwentySeventeen custom fonts
 * Improve localizations further (ensure all text is written in American)

#### 1.6

 * Fix Chronicle styles
 * Make localizations work

#### 1.5.2

 * Tweak css sanitization to allow more CSS rules
 * Add support for Chronicle theme
 * bump version number (now tested with WP 4.5.2)

#### 1.5.1

 * improve support for Opti theme
 * improve support for Monet theme
 * bump version number (now tested with WP 4.5)
 * change default font weight property so that it behaves more nicely

#### 1.5

 * Various code and security improvements
 * Add support for Adaline theme
 * Improve Monet theme colors

#### 1.4.1, 1.4.2 & 1.4.3

 * fix bugs introduced with character sets

#### 1.4

 * Add support for next years default theme – Twenty Sixteen (requires WP4.4)! 🙂
 * Add a link to the Kent theme – which is out now – https://wordpress.org/themes/
   kent
 * Option to select character set from _Settings → General_
 * Filters available fonts according to supported character sets
 * Loads character sets as required

#### 1.3.1

 * Better fallbacks for non latin fonts

#### 1.3

 * Allow font weights to be selected for each font
 * Improve font weights for more attractive letters
 * Add support for some themes that have recently been submitted to wordpress.org
   repo
 * Add support for more of my premium themes
 * Fix a some minor bugs and add additional security
 * Move screenshots to plugin assets directory to make download package a little
   smaller

#### 1.2.1

 * make sure the font preview styles load

#### 1.2.0

 * add new fonts
 * add font preview control in customizer
 * various small tweaks and bug fixes

#### 1.1.0

 * Note that this update may break some of the settings. This is a one time problem
   and I apologise for the frustration!
 * fix how Styleguide enqueues fonts with more than one word in the name
 * add some new fonts to play with

#### 1.0

 * first version live! 🙂

## میٹا

 *  Version **1.8.1**
 *  Last updated **2 سال پہلے**
 *  Active installations **3,000+**
 *  WordPress version ** 4.5 یا اس سے جدید **
 *  Tested up to **6.5.0**
 *  Languages
 * [English (Canada)](https://en-ca.wordpress.org/plugins/styleguide/)، [English (US)](https://wordpress.org/plugins/styleguide/)،
   [German](https://de.wordpress.org/plugins/styleguide/)، اور [Swedish](https://sv.wordpress.org/plugins/styleguide/).
 *  [اپنی زبان میں ترجمہ کریں](https://translate.wordpress.org/projects/wp-plugins/styleguide)
 * Tags
 * [color](https://ur.wordpress.org/plugins/tags/color/)[colors](https://ur.wordpress.org/plugins/tags/colors/)
   [colour](https://ur.wordpress.org/plugins/tags/colour/)[css](https://ur.wordpress.org/plugins/tags/css/)
   [customizer](https://ur.wordpress.org/plugins/tags/customizer/)
 *  [اعلی درجے کا منظر](https://ur.wordpress.org/plugins/styleguide/advanced/)

## درجہ بندیاں

 5 out of 5 stars.

 *  [  7 5-star reviews     ](https://wordpress.org/support/plugin/styleguide/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/styleguide/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/styleguide/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/styleguide/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/styleguide/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/styleguide/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/styleguide/reviews/)

## شراکت دار

 *   [ binarymoon ](https://profiles.wordpress.org/binarymoon/)

## معاونت

کچھ کہنا ہے؟ مدد چاہیے؟

 [معاونتی فورم دیکھیں](https://wordpress.org/support/plugin/styleguide/)