Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 14, 2022 10:07 pm GMT

Using Custom Fonts on your Website

The team at Google has provided an amazing library of fonts which you can use for free on your website. These fonts have allowed developers to show their creativity, as well as uniqueness. In addition, Google has also provided a service allowing you to load any of these fonts into your site without having to host them yourself. Which quite a few of us are probably using at this very moment.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Robot">

But what about when youve got a custom font thats been created just for you, or you can't use the service provided by Google for business or other reasons? How can you use that font on your site?

In this article, Ill show you how you can use those custom fonts, or still use the fonts provided by Google without using the Google Fonts APIs.

Font types

There are several different font types and not all browser versions support every font type. So, check the table below to understand what browsers support what types and the versions at which they started supporting them.

Font formatIEChromeFirefoxSafariOpera
TTF/OTF9.0*4.03.53.110.0
WOFF9.05.03.65.111.1
WOFF214.036.039.010.026.0
SVGNot supportedNot supportedNot supported3.2Not supported
EOT6.0Not supportedNot supportedNot supportedNot supported

* table data provided by w3schools

It's worth noting, the World Wide Web Consortium (W3C) recommends using the Web Open Font Format (WOFF). WOFF is a TrueType font (TTF) or OpenType font (OTF) with compression. WOFF 2.0 is a newer version of WOFF, just with better compression.

Download font

To get your font from Google, navigate to https://fonts.google.com, select your desired font, and click Download family.

Screenshot of Google Fonts website displaying Supermercado One font

This downloads a ZIP file containing all the variations (medium, bold, italic, etc.) of the font. Once you unzip the file, you will notice it downloads a TTF format. You can either use this as is, or convert it to WOFF2. Converting is recommended for production.

Convert font

To convert the font to WOFF2, you can use a service like cloudconvert.

Screenshot of cloudconvert website

Upload your TTF file, click Convert, then click Download.

Use font in your website

With your font converted to WOFF2, youre ready to add it to your website.

Move the converted font into your website folder.

File explorer in VS Code showing addition of new font

Next, youll add a @font-face rule. The @font-face rule allows you to define new font types which can be used throughout your CSS.

The @font-face rule requires you to give the font a name and the url where the font file is located. When the rule is loaded into the client's browser, it will download and load the font file from the specified location.

Place the @font-face rule at the top of your <style> tag or CSS.

@font-face {  font-family: mySuperFont;  src: url(assets/SupermercadoOne-Regular.woff2);}

Now, the font can be referenced by the other styles in CSS,

p {  font-family: mySuperFont;}

or by inline styling

<div style='font-family:mySuperFont'></div>

Screenshot of sample app showing 2 lines using a custom font and another using the default style

Sample app

I've created a working sample application demonstrating how this concept and placed the code for it on GitHub.

GitHub logo OnyxPrime / custom_fonts_sample

Using custom fonts in your website

If you've got any questions, comments, or other ways you get custom fonts in your websites let me know in the comments below.


Original Link: https://dev.to/onyxprime/using-custom-fonts-on-your-website-3g15

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To