How to change my “make” or font in WordPress [Quick Guide]

3:10 pm November 21, 20168499

most of the WordPress themes sold on the market offers plenty of customization options which, most of the time, the choice of font or “make” in English…

However, these themes usually allow you to choose your font in the Google Font library. But what about your own policy you purchased on a dedicated website? You know, make you snapped and is like no other?

We will see together how to change the font of your WordPress site using several methods…

Font personalisée WordPress-une

Where to find one are original?

It is true that before starting to talk about the method to add a font, it would be good place to start to find a…

If you aren’t sure where to look, I propose to browse on the side of the sites where the designers take a shop. The list is long but generally I found my happiness on Creative Market , The Hungry Jpeg , Typekit or MyFonts

You can also use free fonts available for download on sites like Dafont or FontSquirrel but we should not forget to check their license before you use them… Otherwise, you can still use the library provided by Google Font .

Creative Market Store

how to integrate a police in WordPress?

Option 1: the @font-face method

is an available from CSS3 rule that allows to define and provide the fonts contained in your web pages. browsers will therefore depend most of the fonts that are installed on the computers of your readers… With this method, anything goes: you can embed any font to your site…

STEP 1: gather all of the necessary files

once you have found the ideal police, you need to download all the necessary files. You will need:

  • a file Embedded OpenType Font (.eot)
  • a Scalable Vector Graphic (.svg) file
  • a Police TrueType (.ttf) file
  • a Web Open file format (.woff)
  • a Web Open Font Format 2.0 file (.woff2)

you should know that if you buy a premium policy It should be delivered with all these files… On the other hand, if you download a free font on Dafont for example, you have chances to get only one of these files. You can then try to convert your files thanks to a generator online such as that offered by Fontsquirrel.

Generateur de webfont Fontsquirrel

STEP 2: send the files on your server

ideally, you have previously created a child theme so that the next update of your theme does not overwrite your changes. To do this, please not to read this tutorial dedicated to children issues . Then, simply send the 5 files (.eot, .svg, .woff, .woff2, .ttf) to the root of your child theme, or in a folder you might name “fonts” , FTP using a tool such as Filezilla for example.

STEP 3: connect the new font to your theme

this step is very simple, simply add to the file style.css your child theme these few lines of code:

@font-face {
make-family: ‘ wpf ‘; []}
src: url(‘wpf.eot’);
src: url(‘wpf.eot?#iefix’) format(’embedded-opentype’),
url(‘wpf.woff2′) format (‘woff2’),
url(‘wpf.woff’) format (‘woff’),
url(‘wpf.ttf’) format (‘truetype’),
url(‘wpf.svg#svgwpf‘) format (‘svg’);
}

For this example, my policy is called “wpf”, so just to change that by the name of your font. Be sure to respect the capital letters, spaces etc…

Code CSS pour font personnalisée

STEP 4: call the police

now that your child theme contains the files of police and that your file style.css is connected to it through the @font-face method, you can simply call make it on the desired tags. For my example, I applied my new policy only on my titles with this code:

h1, h2, h3, h4, h5, h6 {
make-family: ‘wpf’, Arial, sans-serif! important; []} {19459033]
}

Note: [!important] is not mandatory, add it back if make it fails to be taken into account.

With this method, you could decide to import several different fonts and assign them only on certain tags or predefined classes and, thus, leave free short to your imagination!

Modification de la police

option 2: use the Google Font library

you might want to use this library if your theme does not offer this feature, if you do not want to buy your policy or else simply because you have found your happiness in this library… Its advantage is that your site will appeal to make it stored online at Google Font and, as a result, you don’t need to download the famous files in your WordPress theme.

Rendu visuel Google Font

STEP 1: choose the Google Font font

this step is rather logical! To do this, simply visit the Google Fonts website and locate the ideal police. Once found, you simply click on the little “+” at the top right of the policy in question. A small popup discreet will then appear at the bottom of your screen, click on it in order to deploy it. We we will be of interest to the “embed” tab.

Obtenir la Google Font

STEP 2: connect the Google Font to your theme

for this step, you will need to duplicate the file header.php to your parent theme. Edit this copy (with a text editor such as Sublim Text for example) by inserting the code line proposed by Google Font between the tags and this file. Save this file and send it, via FTP, in your child theme folder.

For my example, the line of code I inserted is this:

Google Font Etape 4

STEP 3: call the Google Font

as for the @font-face method, you to do appeal to your policy by attributing it to your tags in the file style.css to your child theme. To do this, you will need the second information provided by the Google Font site in the section “Specify in CSS” . For my example, I decided to apply this policy to all of my site, IE on the tag “body” with the following code:

body {
make-family: ‘Raleway’, without the serif! important; []} {19459033]
}

Code CSS Google Font

Note: [!important] is not mandatory, add it back if make it fails to be taken into account.

option 3: using a plugin

this option is not the best for my taste but it may suit you if you are not yet ready to create a child theme and/or manipulate the code… So there’s a plugin that offers you to change your fonts without coding, it’s USE ANY FONT.

Plugin WordPress Use Any Font

You can simply install this plugin freemium via the WordPress plugins catalog . When you activate it, you will see new options appear in the toolbar of the editor of article or page allowing you to choose one of the basic fonts available to…

Polices basiques Use Any Font

On the other hand, it will get an API Key through the creation of a free account or paying (of your choice) to be able to download your own police… You will soon reach the paid version since the free version will allow you to use only one font… To meditate…

Use Any Font api-key

option 4: voTre premium theme offers this option

If you plan to use a WordPress Premium theme, you should know that some of them offer the option to integrate its own font. Downloads for each file (.eot, .svg etc…) inserts are provided in the theme settings… This is the case for example of Avada of BeTheme , from TheGem etc…

in conclusion…

In a society where the visual aspect plays a major role, using adapted from original fonts is already a good start to stand out the neighbor! Besides, you saw that it’s not complicated… So, to your keyboards!