How to use fonts in your Web Site with CSS and @font-face rule

Embedding Fonts in your Web Site

The @font-face rule allows custom fonts to be loaded on a webpage. Adding @font-face fonts to your Web site is not that difficult.

When you have found/bought the font you wish to use, first, you need to download some @font-face kits. Create a folder named “fonts” and place the myfont.eot and myfont.ttf files into the folder just include the font file on your web server. Then open your style sheet and add the following:


@font-face {
      font-family: 'MyWebFont';
      src: url('../fonts/myfont.woff2') format('woff2');

Then use it to style elements like this:

body {
      font-family: 'MyWebFont';

and it will be automatically downloaded to the user when needed.

  1. Other things to be considered:
    The @font-face rule should be added to the stylesheet before any styles:

    @font-face { 
          font-family: 'MyWebFont'; 
          src: url('myfont.eot'); /* IE9 Compat Modes */ 
          src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
          url('myfont.woff2') format('woff2'), /* Super Modern Browsers */ 
          url('myfont.woff') format('woff'), /* Pretty Modern Browsers */ 
          url('myfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
          url('myfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
  2. To uncheck the checkbox if value is = to a variable for instance “test” you can do this:
    TrueType Fonts (TTF)TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

    OpenType Fonts (OTF)

    OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

    The Web Open Font Format (WOFF)

    WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

    The Web Open Font Format (WOFF 2.0)

    TrueType/OpenType font that provides better compression than WOFF 1.0.

    SVG Fonts/Shapes

    SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

    Embedded OpenType Fonts (EOT)

    EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Reference links:

How to reduce the file size of your PNG files

The answer is TinyPNG free service:

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colours in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

Difference between images:

Below are two photos of my cousin. The left image is saved as 24-bit PNG directly from Adobe Photoshop. On the right is the same image, processed by TinyPNG. Spot any difference?

difference between images

In the above image the file size is reduced by more than 70%. I have excellent eyesight but can’t spot the difference either! Use the compressed image to save bandwidth and loading time and your website visitors will thank you.

Reference link: