How to bold text in SwiftUI TextField?

Question

There is no built-in font-weight modifier for textfield in SwiftUI, as of Xcode 11.2.1.

How can we introduce font-weight without extending UITextField as UIViewRepresentable?

Cary Champlin · Answer 1 · 2021-10-02T03:33:03.850

92

A general approach for using standard font size options and weights that work with SwiftUI TextField. For example:

TextField("Name", text: $name)
  .font(Font.headline.weight(.light))

Available standard size options (smallest to largest):

.caption
.footnote
.subheadline
.callout
.body
.headline
.title3
.title2
.title
.largeTitle

Available standard font weights (lightest to heaviest):

.ultralight
.thin
.light
.regular
.medium
.semibold
.bold
.heavy
.black

edited Oct 02 '21 at 03:33

answered Jul 11 '20 at 19:50

Cary Champlin

1,021
1
7
8

Best answer also supporting dynamic type. If possible do not used fixed font sizes. – smat88dd Nov 02 '21 at 02:56
The only problem with this approach is it hardcodes `Font.headline`, overriding the default. There is `.fontWeight()` on iOS 16, but for iOS 15 this is probably a reasonable solution. – Calin Dec 03 '22 at 01:39

Ramprasath Selvam · Accepted Answer · 2023-07-08T18:36:25.593

32

Updated Answer:

        Text("Bold Text").bold()

        Text("**Bold Text**")
        Text("*Italic Text*")
        Text("***Bold Italic Text***")

import SwiftUI

struct ContentView: View {
    @State var TextValue: String = "Hello"
    
    var body: some View {
        VStack {
            TextField("placeholder", text: $TextValue)
            .padding(.horizontal, 50)
                .font(.system(size: 30, weight: .heavy, design: .default))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

edited Jul 08 '23 at 18:36

answered Dec 03 '19 at 06:20

Ramprasath Selvam

3,868
3
25
41

1

This is unfortunately breaking dynamic type by using a fixed font size, not recommended. – smat88dd Nov 02 '21 at 02:56
What I don't like in this example ```.font(.system(size: 30, weight: .heavy, design: .default))``` is that we MUST define the font size. If we just want to stick guidelines with predefined .title .body kind font sizes this method is not ideal. – Trevor Apr 14 '22 at 17:15

mahan · Answer 3 · 2023-02-08T12:32:03.363

22

iOS 15+

SwiftUI supports markdown.

Add double asterisks (**) arroud the text/characters to make it bold.

Text("**This text is bold**")

To emphasize text, use underscore

Text("_This text is italic_")

edited Feb 08 '23 at 12:32

answered Jun 10 '21 at 13:41

mahan

12,366
5
48
83

5

Important: That's not a Swift feature, that's an iOS feature! **It will only work on iOS 15!** Users on older versions will see raw Markdown. – FreeNickname Feb 14 '22 at 09:21
Is there a way to weight of the **text** within these asterisks to something heavier than bold? – Joseph Feb 08 '23 at 12:22
@Joseph. No, as of today it is not possible. Use `.fontWeight(.black)` instead – mahan Feb 08 '23 at 12:35
Works with string literal. How to make it work with a string variable? – Abdurrahman Mubeen Ali Jul 20 '23 at 14:28
@AbdurrahmanMubeenAli https://stackoverflow.com/questions/61671313/making-parts-of-text-bold-in-swiftui/67922456#67922456 – mahan Jul 20 '23 at 15:16

score 21 · Answer 4 · answered Jun 29 '20 at 14:48

21

TextField("Name", text: $name)
    .font(Font.body.bold())

answered Jun 29 '20 at 14:48

shawnynicole

791
9
7

score 11 · Answer 5 · answered Nov 01 '20 at 18:55

11

The updated approach for iOS 13.0+, macOS 10.15+, tvOS 13.0+, watchOS 6.0+ is:

.fontWeight(.bold)

answered Nov 01 '20 at 18:55

A.I.A.

173
2
9

3

This doesn't work on `TextField`, so it's not really an answer to the question. – pawello2222 Jan 18 '21 at 23:25
2

My bad. `fontWeight` is suitable for Text views but not for TextFields since they don't expose their label views. Thus `.font(Font.body.bold())` is still the simplest solution :( – A.I.A. Feb 23 '21 at 00:04

pawello2222 · Answer 6 · 2021-01-18T23:26:39.953

2

Expanding on shawnynicole's answer, you can create an extension:

extension View {
    func bold() -> some View {
        font(Font.body.bold())
    }
}

and apply it to any View (including the TextField):

TextField("Text", text: $text)
    .bold()

edited Jan 18 '21 at 23:26

answered Jan 18 '21 at 23:21

pawello2222

46,897
22
145
209

How to bold text in SwiftUI TextField?

6 Answers6

iOS 15+

Linked