Skip to main content
Solved

Monospaced font on Tables (Grid view)

_
Forum|alt.badge.img

Hey guys, do you know a way to use a monospaced font on Tables (Grid Views)? It makes things clear since the whole text will align.

Best answer by Andy_Lin1

You can use an extension like Stylus for Chrome or Firefox to apply custom CSS rules to Airtable, such as this:

.gridView .dataRow [data-columntype] {
    font-family: Roboto Mono, Consolas, Andale Mono, Courier New, monospace;
}

Note that you can modify the selector to only apply the font to certain column types, e.g. instead of [data-column type], use [data-columntype="url"] to just target URLs.
You can also modify the selector to use [data-columnid] to target particular fields, but you’ll need to use DevTools (or a script) to find the field IDs.

View original
    Guillaume_Boill
    1 person likes this
    • Guillaume_Boill
      Guillaume_Boill
    Did this topic help you find an answer to your question?

    2 replies

    A
    Forum|alt.badge.img+17
    • Andy_Lin1
    • Inspiring
    • 183 replies
    • Answer
    • February 15, 2022

    You can use an extension like Stylus for Chrome or Firefox to apply custom CSS rules to Airtable, such as this:

    .gridView .dataRow [data-columntype] {
    font-family: Roboto Mono, Consolas, Andale Mono, Courier New, monospace;
}

    Note that you can modify the selector to only apply the font to certain column types, e.g. instead of [data-column type], use [data-columntype="url"] to just target URLs.
    You can also modify the selector to use [data-columnid] to target particular fields, but you’ll need to use DevTools (or a script) to find the field IDs.

    J
    I
    2 people like this
    • J
      Johannes_Mutter
    • I
      ignaciogiri
    _
    Forum|alt.badge.img
    • _eo_Heck
    • Author
    • New Participant
    • 1 reply
    • February 16, 2022
    Andy_Lin1 wrote:

    You can use an extension like Stylus for Chrome or Firefox to apply custom CSS rules to Airtable, such as this:

    .gridView .dataRow [data-columntype] {
    font-family: Roboto Mono, Consolas, Andale Mono, Courier New, monospace;
}

    Note that you can modify the selector to only apply the font to certain column types, e.g. instead of [data-column type], use [data-columntype="url"] to just target URLs.
    You can also modify the selector to use [data-columnid] to target particular fields, but you’ll need to use DevTools (or a script) to find the field IDs.


    Hi Andy, this sounds like a good alternative to put this working. Thank you.

    A
    1 person likes this
    • A
      Andy_Lin1

    Reply


    Most helpful members this week

    Terms & Conditions