Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the font family of Text using FabricJS?
In this tutorial, we are going to learn about how to change the font family of Text object using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can change the font family by using the fontFamily property.
Syntax
new fabric.Text(text: String, { fontFamily: String }: Object)
Parameters
text ? This parameter accepts a String which is the text string that we want to display.
options (optional) ? This parameter is an Object which provides additional customizations to our text. Using this parameter colour, cursor, border width and a lot of other properties can be changed related to the object of which fontFamily is a property.
Options Keys
fontFamily ? This property accepts a String that allows us to control the font family of text. The default font family is Times New Roman.
Example 1: Default Appearance of Text Object
Let's see a code example to see how our text object looks like when fontFamily property is not used. The text will appear in Times New Roman since no value has been specified.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of text object</h2>
<p>You can see that the font family is Times New Roman</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a text object
var text = new fabric.Text("Add sample text here", {
left: 50,
top: 70,
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Example 2: Using fontFamily Property with "Helvetica"
In this example, we are passing the fontFamily property as key, with a value as "Helvetica". This will change the text appearance from the default Times New Roman to Helvetica font.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing the fontFamily property as key with the value as "Helvetica"</h2>
<p>You can see that the font family is Helvetica</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a text object
var text = new fabric.Text("Add sample text here", {
left: 50,
top: 70,
fontFamily: "Helvetica",
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Common Font Families
You can use any web-safe font family or custom fonts loaded in your project. Here are some commonly used font families:
- "Arial" - Sans-serif font, widely supported
- "Helvetica" - Clean sans-serif font
- "Times New Roman" - Default serif font
- "Georgia" - Serif font designed for screen reading
- "Courier New" - Monospace font
Conclusion
The fontFamily property in FabricJS allows you to customize text appearance by changing the font family. Simply pass the font name as a string value to transform your text styling from the default Times New Roman to any desired font family.
2K+ Views
