Search code examples
cssfont-facewebfonts

What is base 64 fonts for CSS

What is base font for CSS and how can we generate base font URL for CSS font face.

Generally we use like this @font-face { font-family: myFirstFont; src: url(sansation_light.woff); }

But some time I have seen like

 @font-face { font-family: myFirstFont; src: url(too long url with encrypted form); }

enter image description here

I Searched on web but did not get any useful knowledge. So is anyone used in project, please guide me.

Thanks

Solution

  • What you are looking for is encoding your font in base64. Compass (the library that extends SASS which generates CSS for you) has a built-in helper to do that for you:

    http://compass-style.org/reference/compass/helpers/inline-data/

    There are also a plethora of sites on the web that can convert your files into base64. Beware: this is not encrypted, it's just encoded into a string that is valid to embed in CSS and can be read by the system as a file.