{"id":461,"date":"2026-10-14T07:08:22","date_gmt":"2026-10-14T07:08:22","guid":{"rendered":"https:\/\/brandid.app\/help\/?p=461"},"modified":"2026-10-14T07:08:22","modified_gmt":"2026-10-14T07:08:22","slug":"how-to-change-buttons-and-fonts-on-brandid","status":"publish","type":"post","link":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/","title":{"rendered":"How to Change Your Buttons and Fonts on brandID"},"content":{"rendered":"<div class=\"bidh\" style=\"max-width:760px; margin:0 auto; font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:#1f2430; line-height:1.62; font-size:17px;\">\n<p style=\"font-size:18px; color:#3b414c; margin:0 0 22px;\">Your buttons and fonts give your page its personality. brandID lets you pick from a big set of button shapes and finishes, set their colours and transparency, and choose separate typefaces for your profile and your link buttons. This guide covers both the <b>Buttons<\/b> and <b>Fonts<\/b> sections.<\/p>\n<div style=\"background:#fff4f1; border:1px solid #f6d9d1; border-left:4px solid #e8573f; border-radius:12px; padding:16px 18px; margin:0 0 26px;\">\n<p style=\"margin:0; font-weight:700; color:#b23a26; font-size:14px; letter-spacing:.03em; text-transform:uppercase;\">Quick answer<\/p>\n<p style=\"margin:8px 0 0;\">Open the editor, go to <b>Design<\/b>, then <b>Buttons<\/b> to pick a shape and finish and set colours, and <b>Fonts<\/b> to choose a typeface, size and spacing. Every change previews live on the right.<\/p>\n<\/p><\/div>\n<h2 style=\"font-size:21px; font-weight:800; margin:34px 0 10px;\">Before you start<\/h2>\n<ul style=\"margin:0 0 8px; padding-left:22px;\">\n<li style=\"margin:6px 0;\">You need a brandID page open in the editor. If it has no links yet, start by <a href=\"https:\/\/brandid.app\/help\/how-to-add-links-on-brandid\/\" style=\"color:#d94a33; font-weight:600; text-decoration:none; border-bottom:1px solid #f1c3b9;\">adding your links<\/a>.<\/li>\n<li style=\"margin:6px 0;\">Buttons and fonts are on every plan, including the free Trial.<\/li>\n<li style=\"margin:6px 0;\">Pick your <a href=\"https:\/\/brandid.app\/help\/how-to-change-your-background-on-brandid\/\" style=\"color:#d94a33; font-weight:600; text-decoration:none; border-bottom:1px solid #f1c3b9;\">background<\/a> first, then style your buttons and text to sit well on top of it.<\/li>\n<\/ul>\n<h2 style=\"font-size:21px; font-weight:800; margin:34px 0 10px;\">Style your buttons<\/h2>\n<ol style=\"list-style:none; counter-reset:step; margin:0; padding:0;\">\n<li style=\"counter-increment:step; position:relative; padding:0 0 10px 52px; margin:0 0 26px;\">\n      <span style=\"position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:#e8573f; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px;\">1<\/span><\/p>\n<h3 style=\"margin:4px 0 8px; font-size:18px; font-weight:700;\">Open the Buttons settings<\/h3>\n<p style=\"margin:0 0 14px;\">On the <b>Design<\/b> tab, click <b>Buttons<\/b> (next to Profile, Templates, Background and Fonts). The header reads <b>Shape and finish for your links<\/b>.<\/p>\n<\/li>\n<li style=\"counter-increment:step; position:relative; padding:0 0 10px 52px; margin:0 0 26px;\">\n      <span style=\"position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:#e8573f; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px;\">2<\/span><\/p>\n<h3 style=\"margin:4px 0 8px; font-size:18px; font-weight:700;\">Pick a shape and finish<\/h3>\n<p style=\"margin:0 0 14px;\">Button styles are grouped by finish, and each finish comes in three shapes, rectangle, rounded and pill:<\/p>\n<ul style=\"margin:0 0 12px; padding-left:22px;\">\n<li style=\"margin:6px 0;\"><b>Fill<\/b> is a solid button in your button colour.<\/li>\n<li style=\"margin:6px 0;\"><b>Outline<\/b> shows just a border, with the page showing through.<\/li>\n<li style=\"margin:6px 0;\"><b>Shadow<\/b> adds a drop shadow for a raised, tactile look.<\/li>\n<\/ul>\n<figure style=\"margin:0;\"><img decoding=\"async\" src=\"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-styles.webp\" alt=\"The button style groups in the brandID editor: Fill, Outline and Shadow, each with rectangle, rounded and pill shapes\" style=\"border:1px solid #e6e8ec; border-radius:12px; box-shadow:0 1px 3px rgba(20,20,40,.06); display:block; width:100%; max-width:640px;\"><\/figure>\n<p style=\"margin:16px 0 12px;\">The <b>Special<\/b> group adds six decorative styles: torn edges, jiggly edges, a formal double outline, a frosted pill, an outlined &#8220;vector&#8221; style, and an alternating half-circle pill. Click any style to apply it; the one with the green outline is the style your page is using now.<\/p>\n<figure style=\"margin:0;\"><img decoding=\"async\" src=\"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-special.webp\" alt=\"The Special button styles: torn edges, jiggly edges, a double outline, and three more decorative finishes\" style=\"border:1px solid #e6e8ec; border-radius:12px; box-shadow:0 1px 3px rgba(20,20,40,.06); display:block; width:100%; max-width:640px;\"><\/figure>\n<\/li>\n<li style=\"counter-increment:step; position:relative; padding:0 0 10px 52px; margin:0 0 6px;\">\n      <span style=\"position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:#e8573f; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px;\">3<\/span><\/p>\n<h3 style=\"margin:4px 0 8px; font-size:18px; font-weight:700;\">Set the button colours<\/h3>\n<p style=\"margin:0 0 14px;\">Below the styles, set the <b>Button color<\/b> (the fill or border) and the <b>Button font color<\/b> (the text on the button). Type a hex code or click the swatch to pick by eye. The <b>Button transparency<\/b> slider lets you fade the button, which looks great as a glassy effect over a photo or video background. Keep enough contrast between the button colour and the font colour so your links stay easy to read.<\/p>\n<figure style=\"margin:0;\"><img decoding=\"async\" src=\"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-colors.webp\" alt=\"The Button color, Button font color and Button transparency controls in the brandID editor\" style=\"border:1px solid #e6e8ec; border-radius:12px; box-shadow:0 1px 3px rgba(20,20,40,.06); display:block; width:100%; max-width:640px;\"><\/figure>\n<\/li>\n<\/ol>\n<h2 style=\"font-size:21px; font-weight:800; margin:34px 0 10px;\">Choose your fonts<\/h2>\n<ol style=\"list-style:none; counter-reset:step; margin:0; padding:0;\">\n<li style=\"counter-increment:step; position:relative; padding:0 0 10px 52px; margin:0 0 26px;\">\n      <span style=\"position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:#e8573f; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px;\">1<\/span><\/p>\n<h3 style=\"margin:4px 0 8px; font-size:18px; font-weight:700;\">Open Fonts and pick a typeface<\/h3>\n<p style=\"margin:0 0 14px;\">Click <b>Fonts<\/b> in the Design row. You can set a <b>separate typeface for your profile and for your link buttons<\/b>, so switch between the <b>Profile<\/b> and <b>Links &amp; buttons<\/b> tabs at the top. Search by name or sort by <b>Popularity<\/b>, then click a font to use it. Each one shows a live preview and how many styles (weights) it has, and your current pick appears under <b>Selected font<\/b>.<\/p>\n<figure style=\"margin:0;\"><img decoding=\"async\" src=\"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-library.webp\" alt=\"The Fonts panel with a Profile and Links and buttons toggle, a font search box, a Popularity sort and a list of fonts with style counts\" style=\"border:1px solid #e6e8ec; border-radius:12px; box-shadow:0 1px 3px rgba(20,20,40,.06); display:block; width:100%; max-width:640px;\"><\/figure>\n<\/li>\n<li style=\"counter-increment:step; position:relative; padding:0 0 10px 52px; margin:0 0 6px;\">\n      <span style=\"position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:#e8573f; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px;\">2<\/span><\/p>\n<h3 style=\"margin:4px 0 8px; font-size:18px; font-weight:700;\">Fine-tune size, spacing and colour<\/h3>\n<p style=\"margin:0 0 14px;\">Under the font list you can choose a <b>weight<\/b> from the row of <b>Aa<\/b> samples, then set the <b>Font size<\/b> and <b>Letter spacing<\/b> with the sliders. For the buttons scope there is also a <b>Button text color<\/b>. Small adjustments go a long way: a touch more letter spacing can make a bold font easier to read.<\/p>\n<figure style=\"margin:0;\"><img decoding=\"async\" src=\"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-finetune.webp\" alt=\"The Font size, Letter spacing and Button text color controls in the brandID Fonts panel\" style=\"border:1px solid #e6e8ec; border-radius:12px; box-shadow:0 1px 3px rgba(20,20,40,.06); display:block; width:100%; max-width:640px;\"><\/figure>\n<\/li>\n<\/ol>\n<h2 style=\"font-size:21px; font-weight:800; margin:34px 0 10px;\">A few styling tips<\/h2>\n<ul style=\"margin:0 0 8px; padding-left:22px;\">\n<li style=\"margin:6px 0;\"><b>Stick to one font<\/b> for a clean look. A clear sans such as DM Sans, Montserrat or Quicksand suits most pages; save a display font for a strong personal brand.<\/li>\n<li style=\"margin:6px 0;\"><b>Match the mood.<\/b> Rounded or pill buttons feel friendly; rectangle and outline feel more formal.<\/li>\n<li style=\"margin:6px 0;\"><b>Use transparency over images.<\/b> A semi-transparent button sits nicely on a photo or video background without hiding it.<\/li>\n<li style=\"margin:6px 0;\"><b>Keep contrast high.<\/b> If a button is hard to read, change the button colour or the font colour until the text stands out.<\/li>\n<\/ul>\n<h2 style=\"font-size:21px; font-weight:800; margin:34px 0 10px;\">If something looks off<\/h2>\n<ul style=\"margin:0 0 8px; padding-left:22px;\">\n<li style=\"margin:6px 0;\"><b>Your button text is hard to read.<\/b> Raise the contrast between <b>Button color<\/b> and <b>Button font color<\/b>, or lower the transparency.<\/li>\n<li style=\"margin:6px 0;\"><b>The profile font didn&#8217;t change.<\/b> Fonts are set per scope. Switch to the right tab, <b>Profile<\/b> or <b>Links &amp; buttons<\/b>, before you pick.<\/li>\n<li style=\"margin:6px 0;\"><b>Your page looks busy.<\/b> Use a single font and one button finish across the whole page.<\/li>\n<li style=\"margin:6px 0;\"><b>A change didn&#8217;t show.<\/b> The editor saves on its own and shows <b>All changes saved<\/b> at the top. Refresh your live page to see the latest.<\/li>\n<\/ul>\n<div style=\"background:#fdf3ef; border:1px solid #f3ddd4; border-radius:14px; padding:18px 20px; margin:30px 0 8px;\">\n<p style=\"margin:0 0 8px; font-weight:800; font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:#b23a26;\">Key takeaways<\/p>\n<ul style=\"margin:0; padding-left:20px;\">\n<li style=\"margin:6px 0;\">Button styles come in <b>Fill<\/b>, <b>Outline<\/b>, <b>Shadow<\/b> and <b>Special<\/b> finishes, each in rectangle, rounded and pill shapes.<\/li>\n<li style=\"margin:6px 0;\">Set the <b>button colour<\/b>, <b>font colour<\/b> and <b>transparency<\/b> to match your page.<\/li>\n<li style=\"margin:6px 0;\">Choose a <b>separate font for your profile and your buttons<\/b>, from a searchable library.<\/li>\n<li style=\"margin:6px 0;\">Fine-tune with <b>weight<\/b>, <b>font size<\/b> and <b>letter spacing<\/b>.<\/li>\n<\/ul><\/div>\n<h2 style=\"font-size:21px; font-weight:800; margin:34px 0 10px;\">Keep building<\/h2>\n<p style=\"margin:0;\">With your look dialled in, finish your page by <a href=\"https:\/\/brandid.app\/help\/how-to-add-social-icons-on-brandid\/\" style=\"color:#d94a33; font-weight:600; text-decoration:none; border-bottom:1px solid #f1c3b9;\">adding your social icons<\/a>, <a href=\"https:\/\/brandid.app\/help\/how-to-set-up-the-top-menu-on-brandid\/\" style=\"color:#d94a33; font-weight:600; text-decoration:none; border-bottom:1px solid #f1c3b9;\">sorting everything into tabs with the Top Menu<\/a>, and <a href=\"https:\/\/brandid.app\/help\/how-to-add-products-on-brandid\/\" style=\"color:#d94a33; font-weight:600; text-decoration:none; border-bottom:1px solid #f1c3b9;\">adding products to sell or share<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Your buttons and fonts give your page its personality. brandID lets you pick from a big set of button shapes and finishes, set their colours and transparency, and choose separate typefaces for your profile and your link buttons. This guide covers both the Buttons and Fonts sections. Quick answer Open the editor, go to Design, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-461","post","type-post","status-publish","format-standard","hentry","category-buttons-and-fonts"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Change Your Buttons and Fonts on brandID - brandID Help Center<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Change Your Buttons and Fonts on brandID - brandID Help Center\" \/>\n<meta property=\"og:description\" content=\"Your buttons and fonts give your page its personality. brandID lets you pick from a big set of button shapes and finishes, set their colours and transparency, and choose separate typefaces for your profile and your link buttons. This guide covers both the Buttons and Fonts sections. Quick answer Open the editor, go to Design, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/\" \/>\n<meta property=\"og:site_name\" content=\"brandID Help Center\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-14T07:08:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-styles.webp\" \/>\n<meta name=\"author\" content=\"Mohammad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mohammad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/\"},\"author\":{\"name\":\"Mohammad\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#\\\/schema\\\/person\\\/7ff1f23e45b51fac336a7f016379ced9\"},\"headline\":\"How to Change Your Buttons and Fonts on brandID\",\"datePublished\":\"2026-10-14T07:08:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/\"},\"wordCount\":749,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/brandid.app\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/how-to-change-buttons-and-fonts-styles.webp\",\"articleSection\":[\"Buttons &amp; Fonts\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/\",\"url\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/\",\"name\":\"How to Change Your Buttons and Fonts on brandID - brandID Help Center\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/brandid.app\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/how-to-change-buttons-and-fonts-styles.webp\",\"datePublished\":\"2026-10-14T07:08:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/brandid.app\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/how-to-change-buttons-and-fonts-styles.webp\",\"contentUrl\":\"https:\\\/\\\/brandid.app\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/how-to-change-buttons-and-fonts-styles.webp\",\"width\":708,\"height\":398,\"caption\":\"The button style groups in the brandID editor: Fill, Outline and Shadow, each with rectangle, rounded and pill shapes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/how-to-change-buttons-and-fonts-on-brandid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/brandid.app\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Buttons &amp; Fonts\",\"item\":\"https:\\\/\\\/brandid.app\\\/help\\\/category\\\/buttons-and-fonts\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Change Your Buttons and Fonts on brandID\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/brandid.app\\\/help\\\/\",\"name\":\"brandID Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/brandid.app\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#organization\",\"name\":\"brandID Help Center\",\"url\":\"https:\\\/\\\/brandid.app\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/brandid.app\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Layer_1-1-2.svg\",\"contentUrl\":\"https:\\\/\\\/brandid.app\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Layer_1-1-2.svg\",\"width\":97,\"height\":22,\"caption\":\"brandID Help Center\"},\"image\":{\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/brandid.app\\\/help\\\/#\\\/schema\\\/person\\\/7ff1f23e45b51fac336a7f016379ced9\",\"name\":\"Mohammad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b034b3690751d164ad99c4f64cc7a43fe619c7388abf0d8021316fa6fbce01d1?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b034b3690751d164ad99c4f64cc7a43fe619c7388abf0d8021316fa6fbce01d1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b034b3690751d164ad99c4f64cc7a43fe619c7388abf0d8021316fa6fbce01d1?s=96&d=mm&r=g\",\"caption\":\"Mohammad\"},\"url\":\"https:\\\/\\\/brandid.app\\\/help\\\/author\\\/mohammad\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Change Your Buttons and Fonts on brandID - brandID Help Center","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/","og_locale":"en_US","og_type":"article","og_title":"How to Change Your Buttons and Fonts on brandID - brandID Help Center","og_description":"Your buttons and fonts give your page its personality. brandID lets you pick from a big set of button shapes and finishes, set their colours and transparency, and choose separate typefaces for your profile and your link buttons. This guide covers both the Buttons and Fonts sections. Quick answer Open the editor, go to Design, [&hellip;]","og_url":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/","og_site_name":"brandID Help Center","article_published_time":"2026-10-14T07:08:22+00:00","og_image":[{"url":"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-styles.webp","type":"","width":"","height":""}],"author":"Mohammad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mohammad","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/#article","isPartOf":{"@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/"},"author":{"name":"Mohammad","@id":"https:\/\/brandid.app\/help\/#\/schema\/person\/7ff1f23e45b51fac336a7f016379ced9"},"headline":"How to Change Your Buttons and Fonts on brandID","datePublished":"2026-10-14T07:08:22+00:00","mainEntityOfPage":{"@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/"},"wordCount":749,"commentCount":0,"publisher":{"@id":"https:\/\/brandid.app\/help\/#organization"},"image":{"@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/#primaryimage"},"thumbnailUrl":"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-styles.webp","articleSection":["Buttons &amp; Fonts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/","url":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/","name":"How to Change Your Buttons and Fonts on brandID - brandID Help Center","isPartOf":{"@id":"https:\/\/brandid.app\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/#primaryimage"},"image":{"@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/#primaryimage"},"thumbnailUrl":"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-styles.webp","datePublished":"2026-10-14T07:08:22+00:00","breadcrumb":{"@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/#primaryimage","url":"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-styles.webp","contentUrl":"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/10\/how-to-change-buttons-and-fonts-styles.webp","width":708,"height":398,"caption":"The button style groups in the brandID editor: Fill, Outline and Shadow, each with rectangle, rounded and pill shapes"},{"@type":"BreadcrumbList","@id":"https:\/\/brandid.app\/help\/how-to-change-buttons-and-fonts-on-brandid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brandid.app\/help\/"},{"@type":"ListItem","position":2,"name":"Buttons &amp; Fonts","item":"https:\/\/brandid.app\/help\/category\/buttons-and-fonts\/"},{"@type":"ListItem","position":3,"name":"How to Change Your Buttons and Fonts on brandID"}]},{"@type":"WebSite","@id":"https:\/\/brandid.app\/help\/#website","url":"https:\/\/brandid.app\/help\/","name":"brandID Help Center","description":"","publisher":{"@id":"https:\/\/brandid.app\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brandid.app\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/brandid.app\/help\/#organization","name":"brandID Help Center","url":"https:\/\/brandid.app\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brandid.app\/help\/#\/schema\/logo\/image\/","url":"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/04\/Layer_1-1-2.svg","contentUrl":"https:\/\/brandid.app\/help\/wp-content\/uploads\/2026\/04\/Layer_1-1-2.svg","width":97,"height":22,"caption":"brandID Help Center"},"image":{"@id":"https:\/\/brandid.app\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/brandid.app\/help\/#\/schema\/person\/7ff1f23e45b51fac336a7f016379ced9","name":"Mohammad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b034b3690751d164ad99c4f64cc7a43fe619c7388abf0d8021316fa6fbce01d1?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b034b3690751d164ad99c4f64cc7a43fe619c7388abf0d8021316fa6fbce01d1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b034b3690751d164ad99c4f64cc7a43fe619c7388abf0d8021316fa6fbce01d1?s=96&d=mm&r=g","caption":"Mohammad"},"url":"https:\/\/brandid.app\/help\/author\/mohammad\/"}]}},"_links":{"self":[{"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/posts\/461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/comments?post=461"}],"version-history":[{"count":1,"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/posts\/461\/revisions"}],"predecessor-version":[{"id":462,"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/posts\/461\/revisions\/462"}],"wp:attachment":[{"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/media?parent=461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/categories?post=461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brandid.app\/help\/wp-json\/wp\/v2\/tags?post=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}