3

I can load fonts from server. but it's not proper way. How can I load fonts with base 64? i used this my css file

          @font-face {<br>
            font-family: 'MyFontFamily';<br>
            src: url(data:font/ttf;charset=utf-8;base64,data_base64);<br>
        }<br>



    .t{<br>
        font-family: "MyFontFamily";<br>
        background-color: red;<br>
    }

this is my html page

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="style2.css"> 
    <title>Document</title>
</head>
<body>
    <p class = 't'>test</p>
</body>
</html>`
Robert Makritsky
  • 59
  • 1
  • 5
  • 1
    Making a massive assumption here, but the line breaks aren't actually in your css, are they? – Chris J Sep 26 '16 at 14:21
  • _“I can load fonts from server. but it's not proper way”_ – says who? And “proper” in what regard/by what criteria anyway? – CBroe Sep 26 '16 at 14:32

1 Answers1

6

If I understood you correctly then you want to include a base64 encoded font inside of your css file.

To do that use the following syntax:

@font-face {
font-family: 'MyFontFamily';
src: url(data:application/x-font-woff;charset=utf-8;base64,base64_code_here) format('woff');
}

The data header and format change according to the encoded font.

I made an example on JSFiddle: https://jsfiddle.net/b7sp45ca/

Also as Chris J mentioned in the comment section if the line breaks are in your code then you are going to have to get rid of them.

(Resources used: http://sosweetcreative.com/2613/font-face-and-base64-data-uri)

Rewire
  • 331
  • 2
  • 9
  • thanks, this works, i have been looking for special site for this during one hour. http://transfonter.org/. this help me. – Robert Makritsky Sep 26 '16 at 17:02
  • Use `font/woff` instead of `application/x-font-woff` for the mime type. See [this post](https://stackoverflow.com/a/5142316/8583692). – Mahozad Jan 21 '22 at 19:33