How To Customize Swift Label Text Font And Set Text Shadow

Swift UIKit.UIFont class is used to specify the label text font. You can use a system built-in text font, or you can customize the text font by providing the font name and font size. This example will tell you how to specify system font or provide customize text font to swift label component. It will also tell you how to add/remove shadows for label text.

1. Change Label Text Font & Add / Remove Label Text Shadow Example Demo.

If the above video can not be shown, you can watch it from the youtube URL

  1. First, let us look at the example demo video above. There are two labels and two buttons. The first label is used to display text with different text fonts, the second label is used to display tips messages when you click the below buttons.
  2. When you click the Change Label Text Font button, it will change the label text font one by one, when you click the Add Shadow To Label Text button, it will add shadows to the label text and then remove the label text shadows in order.

2. Change Label Text Font Steps.

  1. Create an instance of the class UIKit.UIFont by the class method boldSystemFont as below.
    let font: UIFont = UIFont.boldSystemFont(ofSize: 30)
  2. Assign the above font variable object to the UILabel object’s font property.
    textLabel.font = font
  3. Then the app will use bold system font to render the label text.
  4. If you want to get all your os supported text font family names, use the below code, UIFont.familyNames return a swift array.
    let fontArr = UIFont.familyNames

3. Add / Remove Label Text Shadow Steps.

  1. Set label text shadow color by set label object’s shadowColor property.
    textLabel.shadowColor = UIColor.lightGray
  2. Set label text shadow offset value.
    textLabel.shadowOffset = CGSize(width: 10, height: 1)
  3. Then you can see the label text has shadows.
  4. If you want to remove the shadow, just clear the label object’s shadow color and set shadow’s offset value to 0.
    textLabel.shadowColor = .clear
    textLabel.shadowOffset = CGSize(width:0, height: 0)

4. How To Create The Example Project Steps.

  1. First, create an Xcode project, the project name is SwiftCustomizeLabelTextFontExample. You can read the article How To Create A Swift Project In Xcode to learn more.
  2. Add two labels and two buttons in the Main.storyboard file. You can read the article How To Display Xcode Library, Assistant Editor, Inspectors Window to learn more.
  3. Add outlet variables to the above labels and buttons, add functions to process button’s Touch Up Inside event. You can read the article How To Connect Storyboard UI Component To ViewController Class Code to learn more.
  4. Then edit the ViewController.swift file source code as below.
    //  ViewController.swift
    //  SwiftCustomizeLabelTextFontExample
    //  Copyright © 2019 All rights reserved.
    import UIKit
    class ViewController: UIViewController {
        // This enumeration object save the text font used in this example.
        enum FontEnum: String{
            case SystemFont = "system"
            case BoldFont = "bold"
            case ItalicFont = "italic"
            case CustomFont = "custom"
        // This variable store current used text font, default is system font.
        var currTextLabelFont:FontEnum = FontEnum.SystemFont
        // A boolean variable to save whether has added shadow to label text, the default value is false which means not add shadows to label text.
        var addShadow: Bool = false
        // Outlet variables reference to the two label component.
        @IBOutlet weak var textLabel: UILabel!
        @IBOutlet weak var tipsLabel: UILabel!
        // Outlet variables reference to the two button component.
        @IBOutlet weak var changeLabelTextFontButton: UIButton!
        @IBOutlet weak var addShadowToLabelTextButton: UIButton!
        override func viewDidLoad() {
            // Clear the tips label text.
            tipsLabel.text = ""
            // Get all font family names of the os in an array.
            let fontArr = UIFont.familyNames
            // Print out the font family names array list to the xcode console.
        /* This function will be called when user click the 'Change Label Text Font' button.
           Each click on this button will change the label text font to another one, so you can see the result in the label text.
        @IBAction func changeLabelTextFont(_ sender: UIButton) {
            if(currTextLabelFont == FontEnum.SystemFont){
                // Set label text font to bold system font, font size is 30.
                let font : UIFont = UIFont.boldSystemFont(ofSize: 30)
                textLabel.font = font
                // Save current label text font.
                currTextLabelFont = FontEnum.BoldFont
                // Change tips label message text.
                tipsLabel.text = "Current text label text font is system bold."
            }else if(currTextLabelFont == FontEnum.BoldFont){
                textLabel.font = UIFont.italicSystemFont(ofSize: 30)
                currTextLabelFont = FontEnum.ItalicFont
                tipsLabel.text = "Current text label text font is system italic."
            }else if(currTextLabelFont == FontEnum.ItalicFont){
                // Create a custom UIFont object with provided font name and size. And set the customize UIFont object value to the label's font property.
                textLabel.font = UIFont(name: "Copperplate", size: 35)
                currTextLabelFont = FontEnum.CustomFont
                tipsLabel.text = "Current text label text font name is Copperplate and size is 35."
            }else if(currTextLabelFont == FontEnum.CustomFont){
                textLabel.font = UIFont.systemFont(ofSize: 30)
                currTextLabelFont = FontEnum.SystemFont
                tipsLabel.text = "Current text label text font is system default."
         When user click the 'Add Shadow To Label Text' button, this function will be invoked.
        @IBAction func addShadowToLabelText(_ sender: UIButton) {
            // If not add shadow to label text.
            if(self.addShadow == false){
                // Set label text shadow color.
                textLabel.shadowColor = UIColor.lightGray
                // Set label text shadow offset.
                textLabel.shadowOffset = CGSize(width: 10, height: 1)
                self.addShadow = true
                // Change tips label text.
                tipsLabel.text = "Add shadow to label text."
                // Below code will remove label text shadows.
                // First clear the shadow text color.
                textLabel.shadowColor = .clear
                // Set shadow text offset to 0.
                textLabel.shadowOffset = CGSize(width:0, height: 0)
                self.addShadow = false
                tipsLabel.text = "Remove shadow from label text."

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.