Changing Fonts with Responsive Pro

The Typography option allows you to change the font aspects of your site, such as font size, family, and weight.

To access the Typography options, in your WordPress Administration Panels go to Appearance > Customize > Typography.

Typography options

  1. Heading Font – Depending on your theme, you may have several choices like Arial Black. (If you choose “Google Font” then another option “Google Heading Font” will appear.)
  2. Text Font – Depending on your theme, you may have several choices like Arial Black. (If you choose “Google Font” then another option “Google Text Font” will appear.)
  3. Font Size – Here you can set the font size. 6px, 12px, 14px, 16px, 20px, etc. Default is 14px.
  4. Click “Save & Publish” when done.

If you’re having issues getting a special font like Google Fonts to work, you may want to try adding the @import declaration in your Custom CSS or child theme style.css to make sure that it is pulling in the correct font.

Here is an example:

@import url(http://fonts.googleapis.com/css?family=Qwigley);

Please note that you cannot use variants (attributes) with the Google Font option and our themes. You can only use the Family and nothing else.

If you’re using Typekit for your Font, you’ll need to see their guide here:
http://help.typekit.com/customer/portal/articles/786466-using-typekit-with-a-self-hosted-wordpress-site
When it asks you to install the javascript code, you just paste whatever they supply in your Header Scripts area:
Appearance > Theme Options > Scripts > Custom Scripts for Header and Footer > Embeds to header.php
Click Save Options after you have pasted in the code that TypeKit provided.

If you’re wanting to use your own font that is not Google Web Fonts or Typekit, then you’ll need either use one of these plugins and/or see the informational links (these may also be helpful when using Google Web Fonts or Typekit fonts).
http://wordpress.org/plugins/font-uploader/
http://wordpress.org/plugins/use-any-font/
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
http://css-tricks.com/snippets/css/using-font-face/
http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/

Please note that we are providing information on how to use your own font for your benefit. We may or may not be able to assist you with setting up your own font with your WordPress site.

To learn more about Web Typography see http://en.wikipedia.org/wiki/Web_typography

 

Did this documentation not suffice? Have more questions? Please post a support topic in the forum. https://cyberchimps.com/forum/

Categories: