Include fonts and images in advanced HTML

Follow

There is no option to include fonts and/images in the dink advanced HTML function.

However, you can use BASE64 encoded fonts and images to get the same result.

1. For images, an example of this approach can be found at base64-image.de. For example in css :

  background-image: url('data:image/png;base64,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')

2. For font, examples can be found at sosweetcreative.com
The same principles as for images apply. For example:

@font-face {
 font-family:"font-name";
 src:url(data:font/opentype;base64,[paste-here-font]);
 font-style:normal;
 font-weight:400;
}

 

Have more questions? Submit a request

Comments

Powered by Zendesk