Skip to content

Android Tutorial Station

Change the font in WordPress

Many times we need to change the font in WordPress that brings our theme by default because we find it boring or not very colorful. This is a simple task but at the same time you have to have the clear concepts to do it correctly. This article will also help us to change the font on a web page even if it is not WordPress, since the concept is the same.

How to specify which font to use with CSS.

To specify the font to use with CSS, use the font-family followed by the name of the font to be used. For example:

 font-family: "Times New Roman"; 

Several sources can be specified in order of preference, so if the first one is not available, it will be passed to the second one and so on. The sample CSS code would look like this:

 font-family: "Times New Roman", Arial; 

It should also be noted that when the name of the source has several words, it must be placed in double quotes, as is the case of “Times New Roman” .

Well, we already have the specified font, but we need to be able to specify our custom font that we are going to call for example “mifuente” . As this source is not part of the operating system nor are we going to force each visitor to install that source to see our website correctly, we have to load the source file dynamically when accessing the web through CSS code.

Load a custom font for use with CSS.

The way to load custom fonts is to use the @font-face , which allows us to specify the paths to locate the font files as well as the name that will identify our font and the bold and italic styles.

An example of CSS code to load our custom font named “mifuente” would be the following:

 @font-face {  font-family: 'mifuente';  src: url('mifuente-webfont.eot?#iefix') format('embedded-opentype'),  url('mifuente-webfont.woff') format('woff'),  url('mifuente-webfont.ttf') format('truetype'),  url('mifuente-webfont.svg#mifuente') format('svg');  font-weight: normal;  font-style: normal; } 

The code as we see is quite simple but it can lead to confusion the amount of source files referred to by what we are going to talk about this topic. The problem of loading custom fonts is that each browser does it in its own way , since there is no standard for all browsers. This has been further complicated by the appearance of mobile device browsers with iOS and Android, but the biggest problems are as always Internet Explorer. The boys of Microsoft do not follow any standard with their browser, since it seems that they intend to create their own so that others follow it but they have not succeeded, nor will they.

In the code we can see that different types of source files are loaded:

  • eot?#iefix : The first file to load is mifuente-webfont.eot , the files with the extension eot are of the Embedded OpenType type and are used only by Internet Explorer. The eot file is loaded with the ?#iefix for Internet Explorer to load between versions 6 and 8 (both included).
  • woff : they are files of the type Web Open Font Format and are the ones recommended by the W3C standard . It is supported by the vast majority of modern browsers, including Internet Explorer 9. The problem is that versions lower than 9 of Internet Explorer do not support this format so we specify the eot file previously.
  • ttf : they are files of type True Tipe Font . This format is supported by the vast majority of browsers except Internet Explorer.
  • svg: files are of the Scalable Vector Graphics type and are supported by iPhone / iPad in older versions.

We can appreciate that we are loading four source files (eot, woff, ttf and svg) , which can have a negative impact on the speed of loading the web page , so it is advisable to work with as few different sources as possible. We locate these files with the url() of the CSS code, in the example I am assuming that the source files are in the same folder as the CSS file.

Many will ask you if you have to load the four files to change the font in WordPress , because the answer is that if you want to make sure you maximize compatibility with all browsers, it is advisable to load all four files.

In the following image we can see a summary of how to change the font in WordPress using CSS code :

How to change the font in WordPress

Seen and understood the above, changing the font in WordPress is as simple as editing the style.css file to add the CSS code and load the fonts. Then with the font-family we can specify in which blocks to use the loaded fonts . In the case of web pages you have to modify the CSS file that we are using for our website.

I hope it has helped you clarify the issue of fonts in browsers, which as always would be easier if all browsers were forced to follow the same standard. If you have doubts or comments do not hesitate to raise them.

No comments yet.

Leave a Reply

Your email address will not be published.

Comments (0)