Change wordpress font css

//Change wordpress font css

Change wordpress font css

In order to change your WordPress font, you need to understand that there are 2 components to changing the font:

  • Loading the font onto your website
  • Defining what parts of the website should use the font

Before we actually change the font css, let’s go into the importing of fonts. First, where do you fond them in the first place?

Finding fonts

There are 2 ways to use a  font, locally and externally. In the local variant, you need to have an actual font file (like .woff, .eot and so on) which you load into your website.

External fonts are loaded through third parties. We love using Google Fonts. The added advantage with google fonts is that they give you ready-made code snippets to use!

Google fonts quick use

 

 

In the Google Fonts interface you can select which versions of the font you want to use:

Google font versions

 

Please note that for every version you include, your page will become a tiny bit slower. So don’t just select all of them. Also, very imortant:

You can’t use a weight/style (like bold, or italic) if you don’t import it!

Importing a font into WordPress

Before you can use a font, your website needs to have it available in the first place. You need to import the font. There are 4 ways to add a font:

  • @import in a css file
  • <link> in your <head> section
  • Javascript
  • @font-face in a css file

If you use Google fonts, they supply ready made versions of the first three. I recommend using <link> or @import.

Using @import

Google fonts @import

To add a font using the @import command, you need to add an import line to a cssfile in your theme. For example Cutsom.css (never used it? Here’s a tutorial). This is an example from Google Fonts:

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

Add this to the top of a css file in your theme. For example custom.css and style.css. You can find these at:

  • Appearance
  • Editor
  • Styles.css / Custom.css (use custom.css where possible)

Using a <link>

Google fonts linkThe <link> tag is used to import external files into your theme template. You may recognize it from being used for css files. The location of these code lines is in the <head> section. You can find this by going to:

  • Appearance
  • Editor
  • Header.php

There you will find a section like this:

<head>
Some content
</head>

Add the <link> code after the <head> and before the </head>. An example of a link line from Google Fonts is:

<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>

Using javascript

Font import javascriptJavascript is added the same way as the <link> code above. So inside the <head> section of your header.php.

Using @font-face for local fonts

If you are not using external fonts, you need to use @font-face. This is the case if you bought a premium font for example. The process of using the font face comand is:

  • Upload the font file to your theme directory
  • Add the @font-face to your css

For example, if your theme is called ‘AwesomeTheme’, and your font file is AwesomeFont.woff:

  • Upload AwesomeFont.woff to /wp-content/themes/AwesomeTheme
  • Add the font face as explained below to your custom.css (see @import insctuctions)

The @font-face command is used like this:

@font-face {
font-family: FONTNAME;
src: url(FONT FILE);
font-weight: WEIGHT;
}

For example:

@font-face {
font-family: AwesomeFont;
src: url(AwesomeFont.woff);
font-weight: normal;
}

The font-weight command is used if you are importing multiple weights (thickness) of the font. Every weight has a separate file! This is also the case for styles, like italic. For example:

  • AwesomeFont bold has file: AwesomeFont_bold.woff
  • AwesomeFont italic has file: AwesomeFont_italic.woff

If you do not import a certain weight or style, you will not be able to use it!

Actually change WordPress font CSS

Now that you have imported your font, we can start using it. Many people get frustrated when after importing the font the website looks the same. They miss the second them though:

You need to specify where the font should be applied!

It is possible for example to use 3 fonts on a page. If the website would simply apply them automatically, how would it know where to use what font? To apply a font use:

CSS-SELECTOR {
font-family: ‘Yourfont’, serif/sans-serif;
}

The css selector is a class, id or element type.

The ‘Yourfont’ is replaced by the name of the font. If you used @font-face it is the name you gave to the font yourself.

Using Serif means you will have little hooks in your font, sans-serif uses smooth edges. You probably noticed the distinction before:

Serif vs sans-serif cssAn example using our AwesomeFont without serif:

h1, h2, h3, h4 {
font-family: ‘AwesomeFont’, sans-serif;
}

If we translate the css to human readable syntax, this says:

  • Select elements that are h1, h2, h3 or h4 (headings)
  • Give these elements the ‘AwesomeFont’ style
  • Do not use serifs on the headings

 Done? Styling the font more

After you have applied the font, you may want to change the appearance a little. The most used edits are using:

  • font-size: …px; to change the font size
  • font-weight ..; to change the thickness
  • color: #xxxxxx; to change the color of the text
  • line-height: ..px; to change the line spacing
  • text-align: ..; to change the text to left/center/right/justified alignment

You use these as you did the font family. For example:

h1, p {
font-weight: bold;
color: red;
}

Which in human language is:

  • Select h1 headings and paragraphs (p)
  • Make these elements bold
  • Change their color to red
By | 2018-07-24T15:18:35+00:00 April 17th, 2015|0 Comments