Custom Fonts (Font Squirrel)
On top of offering a selection of free fonts licensed for commercial work, Font
Squirrel is well known for their Font Identifier and Font Generator.
The Webfont Generator allows you to convert any font that you legally own the
rights to (.ttf or .otf file format) and convert it into a usable WebFont Kit that
includes an easy-to-use Cascading Style Sheet (CSS).
Different Font Formats and Browser Support
Over the past few years, modern browsers have dramatically improved how they
support custom fonts. However, even today, not all formats are supported on every
browser.
Here are the most popular browsers and what font format they currently support:
(source: https://www.w3schools.com/Css/css3_fonts.asp)
I’d always recommend using TTF/OTF and WOFF to ensure that your fonts are supported
across all browsers.
For more details on supported font formats, try Can I Use - A great tool for
researching feature compatibility across different browser versions (FREE).
How to add custom fonts to your website using @font-face
The @font-face CSS rule explained below is the most common approach for adding
custom fonts to a website.
Step 1: Download the font
Find the custom font you want to use on your website, and then download the
TrueType Font file format (.ttf). You can also download the OpenType Font format
(.otf)
Step 2: Create a WebFont Kit for cross-browsing
Upload your .ttf or .otf file to the Webfont Generator and then download your Web
Font Kit.
Step 3: Upload the font files to your website
Using your FTP or file manager, upload all the font files found within your Web
Font Kit to your website.* Typically this kit will include multiple file extensions
such as (.eot), (.woff), (.woff2), (.ttf) and (.svg).
Your kit will also include a Cascading Style Sheet (.css) that you will need to
update and upload in step 4.
*This step will vary greatly based upon how your website is built and hosted.
Step 4: Update and upload your CSS file
Open the CSS file in a text editor such as Textedit, NotePad or Sublime.
Replace the existing source URL with the new URL you created by uploading each
file.
By default, the source URL location is set within the downloaded Web Font Kit. It
needs to be replaced by the location on your server.
Here’s a quick example:
Before update:
