FontBeastby Bradley Staples

Input

Filter fonts by name:Filter fonts by category/style:Filter fonts by variant/weight:Filter fonts by subset/language:Variant:Text:

Loading fonts...

Size (in pixels):Stroke Width (in pixels):

Stroke Color:

Text Color:

Background Color:

Output

Canvas

Code

HTML

<canvas width="1000" height="300" id="font-canvas"></canvas>

CSS

<style>
    .font-aclonica {font-family: 'Aclonica';}
</style>

JavaScript

<script src="https://fonts.googleapis.com/css2?family=Aclonica&display=swap"></script>
<script>
    const canvasElement = document.getElementById('font-canvas');
    if (!canvasElement) return;
    const context = canvasElement.getContext('2d');
    if (!context) return;
    const w = 1000;
    const h = 300;
    context.fillStyle = "#000000";
    context.fillRect(0, 0, w, h);
    context.fillStyle = "#ffffff";
    context.textAlign = "center";
    context.textBaseline = "top";
    context.font =  72px "Aclonica";
    context.lineWidth = "1";
    context.strokeStyle = "#ff0000";
    context.fillText("The FontBeast appears!", w/2, h/2);
    context.strokeText("The FontBeast appears!", w/2, h/2);
</script>