When buying products or services on our site, we often receive affiliate commissions that support our efforts. Learn More

Web Fonts and Font Face – What Are They and How to Use Them

web-fonts

EVERYTHING YOU NEED TO KNOW ABOUT ADDING WEB FONTS TO YOUR WEBSITE.

Using custom web fonts can make any website look truly unique and stand out from the competition.  Image if every website used Time New Roman, other than difference in images, most sites won’t look and feel too much different than the rest.

That’s why choosing a font that best suits the theme of your website is an important differentiating factor in adding character.

 

WHAT ARE WEB FONTS

To understand what a web font is you just need to understand what a “web safe font” is.  Web safe fonts are the fonts pre-installed locally on computers.  They are default fonts any computer can recognize and properly display so they are always “safe” to use.

Webs fonts are custom fonts that are not pre-installed locally on computers.  Web designers and developers will use customs web fonts to add a personal touch to a website.

Since there are hundreds of thousands of fonts in the world and cannot all come pre-installed, custom web fonts must be installed manually.

 

DOWNLOAD WEB FONTS

Downloading web fonts is as easy as finding it and downloading the in either .OTF (OpenType Font) or .TTF (TrueType Font) format.  Either of these files is needed to be converted to a browser supported format since they’ll be used for the web.

Font-Browser-Support
source: https://www.w3schools.com/css/css3_fonts.asp

As you can see WOFF is supported by all browsers.  WOFF is basically a compressed version of TTF and OTF for faster load time and less bandwidth usage.  WOFF2 is an updated version of WOFF that’s even more compressed.

You can make an argument that using all format on your website provides full support for all browser versions but with modern browsers, WOFF and WOFF2 is all you’ll need and this guide will use these in the examples.

 

FONT LICENSING

Like with most digital goods, fonts also come with terms specified by EULA (End User License Agreement).  If the terms state that the fonts may be used for personal use only, it may be necessary to obtain a license prior to using certain font for commercial purposes.

Typically, free fonts with a SIL open font license are the ones that can be freely used without concerns over licenses.  Its generally good practice to check the font’s EULA before using it as a web font.

 

CONVERT AND DOWNLOAD WEB FONTS KIT

In order to convert the downloaded OTF or TTF file to WOFF/WOFF2, fontsquirrel is a useful site.  Upload the OTF or TTF file to generate the WOFF/WOFF2 formats and download the Webfont Kit.

The fontsquirrel webfont kit only includes WOFF/WOFF2 formats along with the CSS rules in a stylesheet.css file.  The CSS rules should be copied to your website’s style.css or stylesheet file at the top before any other CSS rules.

otf-ttf-woff

However, if you want to include every font format, you’ll need to use a Webfont Generator that will generate all file formats.  A complete Webfont Kit can be produced at font-converter.net.

At font-converter.net the CSS rules will also be included but whichever site is used to generate the Webfont Kit, the CSS may need some tweaking out of the box depending on the font file folder path.

 

UPLOAD THE FILES TO YOUR HOSTING SERVER

Log into your web hosting account cPanel and upload the WOFF and WOFF2 font files using FTP or File Manager.  When using File Manager for a WordPress site, navigate to:

File Manager  >  Public_html  >  wp-content  >  themes  >  “your-theme-folder”  >  assets  >  css  >  fonts

Note: If a fonts folder does not exist, create one.  If using a child theme, the fonts folder can go in css folder of the child theme.

Once you’re in the Fonts folder, upload the WOFF and WOFF2 font files.  Now that the font files are properly uploaded, we can fetch and use these files in the CSS stylesheet with the @font-face property.

 

@FONT-FACE CSS RULE

The @font-face css rule needs to be added to the style.css or stylesheet file to use it throughout your website.  If your site is a WordPress website, the text editor can be access from the WordPress dashboard from the left sidebar.

Appearance  >  Theme Editor  >  Stylesheet (style.css)

Copy and paste the CSS rules from the stylesheet file in the Web Font Kit folder that was generated earlier, to the WordPress Text Editor.  Be sure to paste it right before any first CSS rule so the fonts will load first.

Because the font files were uploaded to the fonts folder, the url path should include the folder “Fonts” like this:

@font-face {
  font-family: "someFontName";
  src: url("fonts/someFontName.woff2") format ("woff2");
  url("Fonts/someFontname.woff") format ("woff");
  font-weight: normal;
  font-style: normal;
}

Tip: In the example above, src: url points to the exact name of the WOFF2 and WOFF files.  The actual name of “someFontName.woff2” is case sensitive.  Make sure they match exactly the names of the actual files that were uploaded to the Fonts folder or it will not work.

Now that you’ve told the CSS stylesheet to use the new Web Fonts and specified where they are located, you can freely use the fonts to change the appearance of any element.  Here is an example to change the html body element:

Body {
  font-family: "someFontName", Arial, sans-serif;
}

  • Not all CSS rules work with all browsers but “font-family”  seems universal.
@font-face-css-rules
source: https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF

If your website is not a WordPress site, you’ll need to download and install a text editor like Visual Studio Code to open and edit CSS stylesheets.

There are many text editors to choose from but I personally like Visual Studio Code because it’s free and has plenty of extensions but feel free to use whatever works for you. Even the pre-installed Notepad in Windows is technically a text editor.

The edited stylesheet can be re-uploaded to cPanels Public_html folder in File Manager or for small changes, edits can be made directly from the style.css file in File Manager.

 

HOW TO USE GOOGLE WEB FONTS

Up until now, we used the download and convert method to add web fonts to our website but with Google fonts, it isn’t necessary to download them.  All you need to do is copy the code snippet and embed them in the CSS stylesheet.

Visit Google Fonts and choose the desired fonts by clicking the red plus buttons.  To preview content, the text can be written right over the existing sample text and click “Apply to All Fonts”.

 

google-fonts

Click the black tab displaying showing “Families Selected” and click “@import”.

google-fonts-embed

Since we’re embedding the snippet in a CSS file, just copy and paste the blue highlighted section at the top of the CSS stylesheet.  Then, as previously shown in this tutorial, specify the font-family in whatever element you want the font to take effect.

 

SUMMARY

That’s pretty much everything you need to know about importing fonts to your website.  If you found the fonts you need within Google Fonts, just select and embed the snippet to your CSS stylesheet.

But if you need fonts outside of what Google Fonts offers, you can always search, download and convert them for web use.

 

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *