EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 280+ Courses All in One Bundle
  • Login
Home Design Design Tutorials Design Basic Tutorial Figma fonts
Secondary Sidebar
Design Basic Tutorial
  • Figma
    • Figma Libraries
    • Figma fonts
    • Figma Plugins
    • Figma grid
    • Figma Alternatives
  • Basics and Advanced
    • Pro Tools Version
    • What is Autodesk BIM?
    • Animation Character
    • Autodesk Pixlr
    • Sketch plugins
    • Graphic designer requirements
    • Online Gaming Platforms
    • InDesign eyedropper tool
    • InDesign rounded corners
    • InDesign align
    • InDesign resize image
    • InDesign scripts
    • InDesign export to word
    • InDesign newsletter templates
    • InDesign Magazine
    • InDesign Missing Fonts
    • InDesign line spacing
    • InDesign Fonts
    • InDesign Preview Shortcut
    • InDesign Extension
    • InDesign columns
    • InDesign overset text
    • InDesign data merge
    • InDesign grid template
    • InDesign layers
    • InDesign reset preferences
    • InDesign master pages
    • InDesign layout
    • InDesign portfolio template
    • InDesign invoice template
    • InDesign word count
    • InDesign underline
    • InDesign superscript
    • InDesign presentation templates
    • InDesign drop cap
    • InDesign how to add page numbers
    • InDesign resume template
    • InDesign import pdf
    • InDesign table of contents
    • InDesign change page size
    • InDesign book templates
    • InDesign link text boxes
    • InDesign vertical text
    • InDesign Bullet Points
    • InDesign center text vertically
    • InDesign newspaper template
    • InDesign shortcuts
    • InDesign gap tool
    • InDesign paragraph styles
    • InDesign Grid
    • InDesign margins
    • InDesign highlight text
    • InDesign Wrap Text
    • ZBrush ZRemesher
    • Animation Software
    • Principles of Animation
    • 3d Animation Software
    • 3D Modeling Software
    • 3D Software Design
    • 2D Animation Software
    • 10 Quick Tips For Adobe InDesign Users
    • ADOBE FLASH CS6
    • Affinity Photo Brushes
    • Adobe Lightroom For Free
    • Lightroom Background Color
    • Lightroom?Shortcuts
    • Lightroom XMP
    • Lightroom editing
    • Masking Layers in Adobe After Effects
    • Adobe Premiere Pro Plugins
    • Adobe Speedgrade
    • Install Adobe Creative Cloud
    • Install Adobe Premiere Pro
    • What is Adobe Creative Cloud
    • What is Adobe Illustrator
    • Adobe InDesign Templates
    • What is Adobe InDesign
    • Adobe Indesign Uses
    • InDesign Background Color
    • What is Adobe Lightroom
    • What is Adobe Muse
    • What is Adobe Prelude
    • What is Adobe Premiere Pro
    • Careers in 3D
    • Careers in 3D Modeling
    • Careers in 3D Printing
    • Best Editing Software
    • Video Editing Application
    • Video Editing Tools
    • Career In Designing
    • Careers in Game Development
    • 3D Printing Models
    • Adobe Editing Softwares
    • Types of Adobe
    • Types of Illustration
    • What is Graphic Design
    • Best Graphic Design Software
    • Best Photo Editors
    • Game Testing Interview Questions
    • VFX Softwares
    • Unity Scripting
    • Unity Principle of Design
    • Unity JSON
    • Unity webGL
    • Unity 2D
    • Unity 3D Games
    • VFX Companies
    • How To Use Indesign
    • New Features InDesign CS6
    • What is Houdini?
    • Advantages of 3D Printing
    • What is Autodesk
    • Autodesk Character Generator
    • Autodesk Vault
    • Autodesk Viewer
    • Autodesk Navisworks
    • Autodesk Desktop Connector
    • Designers and Architects
    • 2D and 3D Shapes
    • Keyboard Shortcuts for Premiere Pro
    • Unreal Engine Tutorial
    • Best Audio Editors
    • Digital Image Processing
    • What is Motion Graphics
    • What is Digital Design
    • Design Pattern Interview Questions
    • Graphic Design Interview Questions
    • UX designer Interview Questions
    • Is Unreal Engine Free
    • What Is Design Pattern
    • What is VFX
    • What is Audacity
    • What is Unreal Engine
    • What is CATIA
    • What is Blueprint
    • Sony Vegas Pro for Free
    • 3D Graphics Software
    • Best Online Photo Editor
    • Photo Editing App
    • Vector Graphics Editor
    • ArchiCAD
    • ArchiCAD Shortcuts
    • Audacity Keyboard Shortcut
    • Davinci Resolve Shortcuts
    • What is pixel art?
    • Picmonkey Alternatives
    • Adobe Flash Player Alternative
    • Pro tools shortcuts
    • Pro Tools Plugins
    • Architectural Design Software
    • Architectural Design Principles
    • Architecture Design Types
    • Architectural design tools
    • Application of Digital Image Processing
    • Digital Image Processing Fundamentals
    • OpenGL Versions
    • Revit Keyboard Shortcuts
    • Revit plugins
    • Indesign version
    • What is DirectX?
    • DirectX Versions
    • Cinema 4D Plugins
    • Cinema 4d shortcuts
    • Godot Engine
    • Godot tilemap
    • Krita Animation
    • Krita Software
    • Krita Shortcuts
    • Krita eraser
    • Krita brushes
    • Krita Pixel Art
    • Krita Plugins
    • Skencil
    • Fusion 360 Keyboard Shortcuts
    • Anim8or
    • Affinity photo plugins
    • What is Affinity Photo?
    • FL Studio Plugins
    • Vectorworks
    • Architectural Design Elements
  • Inkscape
    • What is Inkscape?
    • Inkscape layers
    • Inkscape Crop
    • Inkscape text
    • Inkscape G-code
    • Inkscape mirror
    • Inkscape rounded rectangle
    • Inkscape EPS
    • Inkscape image to vector
    • Inkscape unlock
    • Inkscape Curved Text
    • Inkscape laser cutting
    • Inkscape background color
    • Inkscape arrow
    • Inkscape vector
    • Inkscape animation
    • Inkscape 3D
    • Inkscape SVG
    • Inkscape Dark Theme
    • Inkscape trace bitmap
    • Inkscape gradient
    • Inkscape Greek Letters
    • Inkscape shadow
    • Inkscape snap to grid
    • Inkscape Fonts
    • Inkscape extensions
    • Inkscape PNG to SVG
    • Inkscape Art
    • Inkscape transparent background
    • Inkscape Alternatives
    • Inkscape Remove Background
    • Inkscape text to path
    • Inkscape logo
  • SketchUp
    • SketchUp Keyboard Shortcuts
    • SketchUp geolocation
    • SketchUp animation
    • SketchUp Change Dimensions
    • SketchUp Import
    • SketchUp 2D
    • SketchUp rendering
    • Sketch software
    • Figma Shortcuts
    • SketchUp Layers
    • SketchUp landscape design
    • SketchUp group
    • SketchUp intersect faces
    • SketchUp Rotate
    • SketchUp Architecture
    • SketchUp 3D Models
    • SketchUp Vray
    • SketchUp Units
    • SketchUp garden design
    • SketchUp Layout
    • SketchUp Mirror
    • SketchUp Extensions
    • SketchUp Unhide
    • SketchUp kitchen
    • SketchUp background
    • SketchUp library
    • SketchUp dynamic components
    • SketchUp CutList
    • SketchUp Array
    • SketchUp Woodworking
    • SketchUp resize component
    • SketchUp Ungroup
    • SketchUp Deck Design
  • GIMP
    • What is GIMP
    • GIMP Versions
    • GIMP brushes
    • GIMP line tool
    • GIMP blend tool
    • GIMP clone tool
    • GIMP magic wand tool
    • GIMP 3D Text
    • GIMP healing tool
    • GIMP Layers
    • GIMP Fonts
    • GIMP Toolbox
    • Blur Effect in GIMP
    • GIMP Change Background Color
    • GIMP Floating Selection
    • GIMP?batch processing
    • GIMP Crop
    • GIMP Filters
    • GIMP GMIC
    • GIMP?opacity
    • Animation in GIMP
    • GIMP import image
    • GIMP replace color
    • GIMP text outline
    • GIMP video editing
    • GIMP Alternatives
    • GIMP vector graphics
    • GIMP text shadow
    • GIMP resize image
    • GIMP pixel art
    • GIMP invert colors
    • GIMP GIF
    • GIMP move selection
    • GIMP normal map
    • GIMP remove background
    • GIMP rotate
    • GIMP grid
    • GIMP text effects
    • GIMP erase to transparent
    • GIMP resize layer
    • GIMP Patterns
    • GIMP extensions
    • GIMP blur background

Related Courses

Maya Course

Photoshop course

After Effects Course

Figma fonts

Figma fonts

Introduction to Figma fonts

In this article we are going to learn how to use fonts in Figma. Now the first step of using fonts is to know how to install font and for that you should know where to find them. So first we will look at various websites where we can download the fonts and then how to install in Windows which will be used in Figma. Figma has a robust set of tools which can be used for proper type settings according to the output format which are present in popular text editing programs along with effects and customization options.

All in One Design Bundle(280+ Courses, 100+ projects)
AutoCADHoudiniAdobe Premiere ProPhotoshop
SolidworksVFX Visual EffectsCorelDrawUnreal Engine
Price
View Courses
280+ Online Courses | 100+ projects | 2000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (64,570 ratings)

Steps of Figma fonts

Here are the following steps to mention below

Start Your Free Design Course

3D animation, modelling, simulation, game development & others

Step 1: Let’s us start by first downloading fonts. There are many free and paid fonts sites from where you can download fonts. Some free websites are google fonts, dafont, urbanfonts, fontspace etc. We will see how to download from google fonts website as shown. First, we will change the filters to display on sans serif and Display which will reduce the search result. We do not want serif which puts flare on top of letters. Also, we do not want handwriting which will be more like cursive and not the monospace which are the coding fonts.

Figma fonts output 1

Step 2: Then we can customize the text if we want or we can select from the drop down for sentence, alphabet, paragraph or numerals.

Figma fonts output 2

Step 3: Next, we can change the size of the fonts using the slider

Figma fonts output 3

Step 4: Then we have selected a font named Ubuntu and we can see multiple options or styles are available. You can also see the type of glyphs the font has if you are looking for characters which are not standard. In About section you can get bit of a history of the font and authors or designer information. Also, there is a licencing option if you are looking fonts for commercial purpose and the last option is pairings which is suggested by google if you want another font in combination with this font.

Figma fonts output 4

Step 5: Now we have selected the regular style. Here we have option the review the fonts we have selected and an option to embed the font if you are using on a website or for our purposes if we want to use with Figma then we select download all. Also, there is an option to download family if you want to download all the font styles in this particular font.

Figma fonts output 5

Step 6: A zip file will be downloaded on your computer which can be extracted by right clicking it and all the fonts will be inside the extracted folder. This procedure will work on windows.

Figma fonts output 6

Step 7: Next we will right click on all the fonts and select install for all users.

Figma fonts output 7

Step 8: Then open Figma and start with a blank canvas from the presets.

Figma fonts output 8

Step 9: You can rename your document from the center of the toolbar

Figma fonts output 9

Step 10: Let’s start with a Frame or press F and select the design of iPhone 11 Pro.

Figma fonts output 10

Step 11: Then use rectangle tool or press R and make a rectangle as shown.

Figma fonts output 11

Step 12: You can change the fill color from the design panel.

Figma fonts output 12

Step 13: Now use the text tool or press T and click on the rectangle which will create a text box, then add the text, change the font fill color to white and size to 32 and the font style to Ubuntu which we just installed.

Figma fonts output 13

Step 14: Again, use the text tool set the size to 20 other options should be same as the last text except the fill which is black and click once and type this create text box with auto resize attribute to width which allows the width of the textbox to grow along with the text.

output 14

Step 15: Next let’s click and drag a text box which creates a fix sized text box and the auto resize is fixed, once the text reached the end of the text box the box will not resize vertically.

output 15

Step 16: So, in the design panel in text section, we can set auto height for this text box and now we can type more and the height will be adjusted according to the text.

output 16

Step 17: Next we create three text field to demonstrate Bold using Ctrl + B, Italic using Ctrl + I, Underline using Ctrl + U.

output 17

Step 18: Then we adjust the line height to 140% which is 100% by default and it changes the space between the lines. So, by holding shift and tapping up arrow key we can increase line height in increment of 10% and set letter spacing to 2px which is in percent by default and it changes the space between the characters.

output 18

Step 19: Create another frame or duplicate the existing frame by copy and pasting and keep the header. Then create a text box by dragging and put some random text. Create paragraphs by hitting enter at the end of the sentences.

output 19

Step 20: Now we set the paragraph spacing to 10 and paragraph indentation to 20 so at the start of each paragraph there is some space.

output 20

Step 21: Now we have created another two paragraphs, in first we can change the horizontal text alignment to left, center or right. In the second larger textbox we can change the vertical text alignment to top, middle and bottom.

output 21

Step 22: Next we will look at some text effects. First, we can change the fill of the text to red as shown.

output 22

Step 23: Next we add some text and make the fill to grey. Then we use the stroke property to add a stroke of 1pt on outside.

output 23

Step 24: Lastly, we can add drop shadow effect. We can stack multiple drop shadows to accentuate the effects.

output 24

Conclusion

In this article, we have seen how to use fonts in Figma. First, we have seen how to download fonts from google fonts and customize them to our needs. Then we have seen how to install it in the window. Then we have seen the basics of text tools to make use of fonts that we have downloaded.

Recommended Articles

This is a guide to Figma fonts. Here we discuss how to download fonts from google fonts and customize it our needs and how to install them in the window. You may also have a look at the following articles to learn more –

  1. Figma Alternatives
  2. HTML Fonts Styles
  3. GIMP Fonts
  4. Kubernetes Secrets
Popular Course in this category
Maya Training (10 Courses, 7+ Projects)
  10 Online Courses |  7 Hands-on Projects |  100+ Hours |  Verifiable Certificate of Completion
4.7
Price

View Course

Related Courses

Photoshop Training (10 Courses, 12+ Projects)4.9
After Effects Training (3 Courses, 3+ Projects)4.8
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Photoshop Tutorial
  • 3ds Max Tutorial
  • All Tutorials
Certification Courses
  • All Courses
  • Design Course - All in One Bundle
  • Photoshop Course
  • Maya Course
  • Unreal Engine Course
  • Unity Course
  • DaVinci Resolve Course
  • Pro Tools Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Design Course

Banner Creation, Object Selection, Sky Replacement, Advance Filters & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Design Course

3D animation, modelling, simulation, game development & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more