Convert Type File Into Webkit & Install Webkit

September 26, 2016

Jon Fuller

Looking for instructions in how to convert Font File to a Webkit AND install that Webkit?

Look no further — we’ve got you covered.

Converting the File to a Webkit

Download a font to get the OTF or TTF file.
Visit – transfonter.org
Click Add font(s).
Leave “Family support” checked on and other 3 options off.
Select TTF, WOFF, EOT and WOFF2 formats.
Click “Covert.”

Installation of Webkit

Open up FileZilla.
Create a new site or log into the existing site you want to add the webkit to.
Navigate to /wp-content.
Inside /wp-content, create a new folder called “fonts.”
Place the webkit file (extracted file, not compressed/zip file) into the “fonts” folder.
Should look something like: /wp-content/fonts/fontnamehere.eot
In the backend of your site, copy the CSS code from the .css file in your webkit, paste the CSS into the theme editor.
Add the proper filename path in front of the src url and url links. Example: src: url(‘/wp-content/fonts/fontnamehere.eot’);
Create your class/classes to pull in the font-family.

Finally, add the class that you created to the elements you want to be the specific font :)

Jon Fuller https://freshysites.com/team/#Jon-Fuller

Jon is from the Binghamton, NY area and graduated from the School of Art and Design at Alfred University with a Bachelor of Fine Arts. Concentrated studies were in Graphic Design and Video. Jon has an appreciation of all aspects of art and design, and has an extensive background in both print media and web — with a thorough understanding of video and photography. Jon comes to FreshySites with 9 years of graphic design and web experience. He continues to make a habit of researching new tools and technologies to broaden his knowledge in the web development industry. He’s a tech junkie who has a passion for implementing new techniques and improving his surroundings. Outside of work, Jon also enjoys going on new adventures with his wife, exercising, and sipping on quality craft beer.