Embed fonts CSS only, avoid Access-Control-Allow-Origin error

In a project I need to use fonts embed on an other non https server resulting in security errors in the console. So I look into options and one of them is to encode the font directly into the CSS.

Embed fonts in CSS base 64

You should have different formats WOFF2, WOFF, and TrueType (TTF)
If you are missing some of these formats, use Font Squirrel web font generator to create the others.

data: URI Generator
The data: URI scheme allows you to build URLs that embed small data objects. data: URIs are supported by most modern browsers

https://dopiaza.org/tools/datauri/index.php

Then in your CSS you will have somethings like:

@font-face {
    font-family: 'basis-grotesque-regular';
    src: url('data:application/octet-stream;base64,DLEBABywAQABA...') format('eot');
    src: url('data:application/font-woff;base64,d09GRgA...') format('woff'),
         url('data:application/octet-stream;base64,d09GMgABA...') format('woff2'),
         url('data:application/octet-stream;base64,AAEAA...') format('truetype');
    font-weight: normal;
    font-style: normal;
}