What is base 64 fonts for CSS

Question

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); }

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

Thanks

What? This is not clear at all. What are you asking? `Fontface` URLs are relative to the location of the CSS file they are declared in, if that helps. — somethinghere, Jan 20 '17 at 11:42
We use font face normally like this ```@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }``` But some time I have seen some like ```@font-face { font-family: myFirstFont; src: url(too long url); }``` So how can we generate that URL and What is basefont — Santosh Khalse, Jan 20 '17 at 11:49
read [this](http://stackoverflow.com/questions/12144000/using-custom-fonts-using-css) — Leo the lion, Jan 20 '17 at 11:51
'Generate that URL'? _You_ have to put the file somewhere or get it from a URL. I don't get what you are asking. The other sites probably host the files themselves or on a CDN or something... — somethinghere, Jan 20 '17 at 12:00
somethinghere@Yes! but some time I have seen too long URL with encrypted form — Santosh Khalse, Jan 20 '17 at 12:05
somethinghere@ Please have a look on question I have added the image for too long URL — Santosh Khalse, Jan 20 '17 at 12:10
That is basically a font file encoded as base64 (you can do this trick with a wide variety of files, like images etc...). `compass` supports converting them as you go, have a look here: http://compass-style.org/reference/compass/helpers/inline-data/ . You can generate them on a plethora of sites on the web as well. Usually, though, converting to base64 increases the size of the output (so the font is slightly hevier as it contains more unecessary base64 data). — somethinghere, Jan 20 '17 at 12:17

score 1 · Accepted Answer · answered Jan 20 '17 at 12:19

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.

What is base 64 fonts for CSS

1 Answers1