Text or images? Which one do you prefer? Of course, images are more eye-catching than text, but keep in mind you can also turn heads with horizontal and vertical text, and have a wow effect. You can use vertical text alignment to create a scrolling effect by leaving the content and navigation horizontal for functionality. Alternatively, combine it with decorative elements such as an outline rectangle and striped-like background to put a message in the spotlight (see images below, for example).

Mastering Typography: Choosing the Best Fonts for Web Designers

Typography is currently playing an important role in web design, not only when there is lack of images, but as design feature as well. Don’t forget though, web design is not about picking great typefaces, it is how we use them’.

We love typography, and if you navigate throughout our website, you will notice it. Below is an example of typography we used in one of our projects. We fused bold typography with images to make the text more dynamic, and give personality to it. As you can see, the text is overtaking the images as the main design element.

Within this selection, you’ll find a variety of fonts (an abundance of free resources are readily available). Our choices were made based on both aesthetic and functional considerations. Many of these fonts belong to extensive families, offering diverse styles and weights, thus granting increased flexibility in your design endeavours. Additionally, we’ve spotlighted particular fonts favoured for both headlines and paragraph text. The majority of these fonts are available for free use in both personal and commercial projects. Notably, Google Fonts stands out as a particularly valuable resource in this regard. Feel free to incorporate them into your products and projects, whether commercial or otherwise. However, it’s important to remember that selling the fonts individually is not permitted.

Calligraphy Fonts

Headline Fonts

Google Fonts

Embedding Google fonts

Google Web Fonts system allows the use of fonts hosted on their servers. It is free to use, and doesn’t require an account. Implementation is quick and easy. Just choose a font and click embed. To embed a font, copy the code into the head of your html, in the Header Scripts of your theme, or enqueue it in theme functions. I personally prefer the enqueue method when it comes to Google fonts, as is the safest way to add a stylesheet file to WordPress. By using wp_enqueue_script and wp_enqueue_style functions, you tell WordPress when to load the file, where to load it, and what are its dependencies. If you don’t, WordPress has no idea your file exists.

Whichever method you decide to use, you will also have to copy and define the CSS rules for each of the font families you would like to embed (e.g. font-family: ‘Oswald’, sans-serif;). Then use it to style any elements in your website like this:

h1 {
  font-family: 'MyWebFont';
}

Embedding Google fonts using wp_enqueue method

Another way to add Google fonts to your WordPress website is by enqueuing the font in your theme’s functions.php file. Using the same example from Google fonts, this is what we would use:

//* Enqueue Google Fonts styles
add_action( 'wp_enqueue_scripts', 'google_fonts_enqueue_scripts_styles' );
function google_fonts_enqueue_scripts_styles() {

	wp_enqueue_style( 'yourtheme-google-fonts', '//fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;469;500;600;700&display=swap', array(), CHILD_THEME_VERSION );
}

Embedding fonts using the @font-face rule

First of all, you need to download the font you like in a web format. If you do not have it in a web format, then you can convert it using the Font Squirrel web font generator. Upload the font you purchased (or free for personal or commercial use ), agree that the font is legally eligible for embedding, and download your kit. Now, upload it on your WordPress hosting server using the FTP or File Manager of your cPanel. Create a new fonts folder (if you do not have one) in your theme or child theme‘s directory, and upload the individual font files you downloaded from Font Squirrel ( .woff, .woff2, .eot, .svg, .ttf, plus the stylesheet.css). Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule (like this) right after /* Table of Contents.

@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/MyWebFont.eot'); /* IE9 Compat Modes */
    src: url('fonts/MyWebFont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
         url('fonts/MyWebFont.woff2') format('woff2'),  /* Super Modern Browsers */
         url('fonts/MyWebFont.woff') format('woff'),  /* Pretty Modern Browsers */
	 url('fonts/MyWebFont.ttf')  format('truetype'),  /* Safari, Android, iOS */
         url('fonts/MyWebFont.svg#MyWebFont') format('svg');  /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

Putting aside the technical aspects of installing fonts on websites, which is not easy for everyone (you can definitely hire a professional), playing with fonts can add a dynamic aspect to your website. Let us know what are your favourite fonts to use, or if any of the fonts we shared made you rethink your branding.

Who says fonts can’t be fun?