• Home
  • Quick Start
    • Color Schemes
  • Documentation
    • Shortcodes
    • JaW Hooks
    • Screenshots of ThemeOptions
  • Tutorials
  • Forum
  • Contact
Log In

  • Home
  • Quick Start
    • Color Schemes
  • Documentation
    • Shortcodes
    • JaW Hooks
    • Screenshots of ThemeOptions
  • Tutorials
  • Forum
  • Contact

Homefor DevelopersHow to set Fonts
fonts1

How to set Fonts

In Gday News theme are two modes for settings of fonts. Simple and Advanced.  If you want to set your fonts quick and simple, just keep Simple settings. If you want to set all parts of theme just switch to advanced mode.

  • admin
  • Posted in for DevelopersTutorials
0
SHARES
SHARESHARESHARESHARE
SHARESHARE

This tutorial has 2 parts:

  • Google Fonts
  • Selfhosted Fonts

Working with Google fonts

Go to Google Fonts

Choose font, which you like. e.g. Roboto.

Click Quick use. 

Google fonts - quick use

Now you can see site where are listed all width, character sets of this font, etc…

Go back to your Theme Options -> Typography Options and fill there font family (e.g. Roboto).

As source choose Google fonts.

Select weight from the list (1), you’ve seen at the Google Font web.

Select size and line height – we recommend to keep something between 1.3 – 1.5em.

In the last item you can choose Websafe font (3). It means, when your font wont loaded (for some reason), there will be used some similar font type.

If you’re using a language which contains special characters, please make sure, that your chosen font support that character set (2). In Theme Options -> Typography Options scroll down and in Character Subsets for Google Fonts section choose your character set.

Google fonts - gdaynews

Working with self-hosted fonts

Please copy your .eot, .ttf and .woff files to /css/custom_styles/ folder.

In this folder  /css/custom_styles/ also create some .css file (e.g. my-styles.css)

Into that file, please put this code:

@font-face {
	font-family: 'my-font';
	src:url('./custom_styles/my-font.eot');
	src:url('./custom_styles/my-font.eot') format('embedded-opentype'),
		url('./custom_styles/my-font.woff') format('woff'),
		url('./custom_styles/my-font.ttf') format('truetype'),
		url('./custom_styles/my-font.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

Next go to Theme Options -> Typography Options And switch source to self-hosted font.

As font-family set my-font

If you have some thoughts or ideas, please leave us a feedback 🙂

Related Posts

wphooks
0 comments
JaW Hooks

Actions jaw_before_usermanagement and jaw_after_usermanagement

menu-widget6
0 comments
CodeTutorials

How to add more Widget areas to menu.

wphooks
0 comments
JaW Hooks

Filter jaw_get_template_part

wp-plugin

List of Plugins (Plugins compatibility)

blogcarouselmain

How to Set Blog Carousel

Related Posts

wphooks
0 comments
JaW Hooks

Actions jaw_before_usermanagement and jaw_after_usermanagement

menu-widget6
0 comments
CodeTutorials

How to add more Widget areas to menu.

wphooks
0 comments
JaW Hooks

Filter jaw_get_template_part

install-t6
0 comments
Tutorials

How to set Custom Stock Ticker

Tags

  • custom styles
  • fonts
  • google fonts
  • typography
  • Was this Helpful ?
  • yes   no
Copyright © 2016 jawtemplates - WordPress Design Studio Allow responsivity