CODEWITHSUNDEEP
cssfonts
user4245652
user4245652

Reputation:

Directly embedding a base64 string into @font-face. Is my syntax incorrect?

I'm trying to directly embed a font using @font-face just like examples I've seen. Visual Studio is flagging my url(...) function as having an unbalanced parantheses and is flagging a bunch of the base-64 characters as being unexpected. In addition, my page is not rendering the font. So I know something must be wrong.

NOTE: I shortened the base-64 string due to character limits on SO posts.

@font-face { font-family: 'CHNfnt_R'; font-style: normal; font-weight: 400; src: url(data:font/truetype;base64,
AAEAAAATAQAABAAwRkZUTV/PWxEAAAE8AAAAHEdERUYC8gHSAAABWAAAACxHUE9Tsxt/TQAAAYQA
AA3iR1NVQibDINUAAA9oAAAAYE9TLzK5Ivx/AAAPyAAAAGBjbWFwn9BCKgAAECgAAAHiY3Z0IBgY
EWAAABIMAAAAQmZwZ21TtC+nAAASUAAAAmVnYXNwAAAAEAAAFLgAAAAIZ2x5ZhleacIAABTAAACN
vGhlYWQDbZjlAACifAAAADZoaGVhDAQIEWyDzsCK7EDRnYrRLARIEWyEDUCK7EDRnYrRLASIEWyEWkCK7ED
RnYrRLATIEWyEjsCK7EDRnYrRLAUIEWyEzoCK7EDRnYrRLAVIEWyFDkCK7EDRnYrRLAWIEWyFTYC
K7EDRnYrRLAXIEWyFi4CK7EDRnYrRFmwFCsAAAFSe/aUAAA=) 
format('truetype');}

Upvotes: 1

Views: 250

Answers (1)

davidcondrey
davidcondrey

Reputation: 36043

Proper syntax is:

@font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[base-64 code here]);
    url('font.ttf') format('truetype');
font-style:normal;
font-weight:400;
}

@font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[base-64 code here]);
    url('font.ttf') format('truetype');
font-style:normal;
font-weight:600;
}

@font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[base-64 code here]);
    url('font.ttf') format('truetype');
font-style:normal;
font-weight:900;
}

Upvotes: 2

Related Questions