{"id":1950548,"date":"2021-08-24T04:05:37","date_gmt":"2021-08-24T08:05:37","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1950548"},"modified":"2021-09-13T09:19:33","modified_gmt":"2021-09-13T13:19:33","slug":"customizing-fonts-for-calendar-events","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/customizing-fonts-for-calendar-events\/","title":{"rendered":"Customizing Fonts"},"content":{"rendered":"\n<p>We strive to have all our views, widgets, and shortcodes have a unified style so that they all just <em>go together<\/em>. Sometimes though, that style doesn&#8217;t mesh with the site&#8217;s theme. That&#8217;s why we provided a number of configurable options in the <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/wordpress-customizer-2\/\">WordPress Customizer<\/a>.<\/p>\n\n\n\n<p>One common request we see is the ability to change the calendar&#8217;s font so that it matches the rest of the site. There are a couple of ways to do this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-method-1-use-the-wordpress-customizer-settings\">Method 1: Use the WordPress Customizer settings<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Navigate to <strong>Appearance \u2192 Customize<\/strong> from the WordPress dashboard.<\/li><li>Click on <strong>The Events Calendar<\/strong>, then <strong>Global Elements<\/strong><\/li><\/ul>\n\n\n\n<p>Once you are on the Global Elements panel, the following options are available to customize fonts for calendar events:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/08\/font-control-1.png\" alt=\"The customizer settings for The Events Calendar's global elements, including font family, and font size.\" class=\"wp-image-1950552\"\/><\/figure><\/div>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<ul class=\"wp-block-list\"><li><strong>Font Family:<\/strong> This is the actual font you want to be used for the calendar.<ul><li><strong>Default:<\/strong> The Events Calendar plugin fonts are used.<\/li><li><strong>Inherit theme font(s):<\/strong> The theme&#8217;s styles are used in place of the plugin&#8217;s fonts.<\/li><\/ul><\/li><li><strong>Font Size<\/strong><ul><li><strong>By Pixel:<\/strong> The base (or &#8220;normal&#8221;) size of the font in pixels.<\/li><li><strong>By scale:<\/strong> The base size of the font defined by scale in small, medium, or large variations. Each adjustment is approximately <code>2px<\/code> from <code>16px<\/code>, which is the base font size. <\/li><\/ul><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-jetpack-image-compare\"><div class=\"juxtapose\" data-mode=\"horizontal\"><img loading=\"lazy\" decoding=\"async\" id=\"1950597\" src=\"https:\/\/i0.wp.com\/images.theeventscalendar.com\/kb\/uploads\/2021\/08\/admin-customizer-global-font-1.jpg?ssl=1\" alt=\"\" width=\"1200\" height=\"579\" class=\"image-compare__image-before\"\/><img loading=\"lazy\" decoding=\"async\" id=\"1950598\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/08\/admin-customizer-global-font-2.jpg\" alt=\"\" width=\"1200\" height=\"579\" class=\"image-compare__image-after\"\/><\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-method-2-custom-css\">Method 2: Custom CSS<\/h2>\n\n\n\n<p>Let&#8217;s say that Method 1 isn&#8217;t working for some reason, or maybe you want to use some completely different font for the calendar than what is provided by the plugin or theme. You can use the WordPress Customizer&#8217;s <strong>Additional CSS<\/strong> panel for greater control of the calendar&#8217;s fonts.<\/p>\n\n\n\n<p>The Events Calendar uses <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/\">CSS custom properties<\/a> to define the font and font sizes used in the calendar styles. We won&#8217;t go deep into CSS custom properties here, but the main idea is that they allow us to define a variable, say <code>--tec-font-family-base<\/code>, and assign that variable a value that gets used wherever the variable is used.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-custom-properties-for-fonts\">CSS custom properties for fonts<\/h3>\n\n\n\n<p>The following CSS custom properties are available:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Custom property<\/th><th>Default value<\/th><\/tr><\/thead><tbody><tr><td><code>--tec-font-family-sans-serif<\/code><\/td><td><code>\"Helvetica Neue\", Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif<\/code><\/td><\/tr><tr><td><code>--tec-font-size-0<\/code><\/td><td><code>11px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-1<\/code><\/td><td><code>12px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-2<\/code><\/td><td><code>14px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-3<\/code><\/td><td><code>16px<\/code> (this is the &#8220;base&#8221; font size)<\/td><\/tr><tr><td><code>--tec-font-size-4<\/code><\/td><td><code>18px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-5<\/code><\/td><td><code>20px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-6<\/code><\/td><td><code>22px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-7<\/code><\/td><td><code>24px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-8<\/code><\/td><td><code>28px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-9<\/code><\/td><td><code>32px<\/code><\/td><\/tr><tr><td><code>--tec-font-size-10<\/code><\/td><td><code>42px<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-change-the-font-family\">Change the font family<\/h3>\n\n\n\n<p>To change the font used by The Events Calendar, open up the <strong>Additional CSS<\/strong> panel in the WordPress Customizer and add the following and change the value to the font you want to use:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n:root {\n  --tec-font-family-sans-serif: &quot;Georgia&quot;, serif;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-change-the-font-size\">Change the font size<\/h3>\n\n\n\n<p>You can change any specific font size used in the calendar by changing the value of any of the following CSS custom properties:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n:root {\n    --tec-font-size-0: 11px;\n    --tec-font-size-1: 12px;\n    --tec-font-size-2: 14px;\n    --tec-font-size-3: 16px; \/* This is our base *\/\n    --tec-font-size-4: 18px;\n    --tec-font-size-5: 20px;\n    --tec-font-size-6: 22px;\n    --tec-font-size-7: 24px;\n    --tec-font-size-8: 28px;\n    --tec-font-size-9: 32px;\n    --tec-font-size-10: 42px;\n}\n<\/pre><\/div>\n\n\n<p>The values listed above are the default values. Changing the value of any custom property will update the font size wherever they are used in the calendar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-changing-specific-elements\">Changing specific elements<\/h3>\n\n\n\n<p>Or, if you prefer, you can still change the font size (and font family for that matter) without CSS custom properties. This allows you to change the font for a specific element, like the event post title, without affecting the font used by other calendar elements.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-single-event-title {\n  font-size: 32px;\n\n  \/* or *\/\n  --tec-font-size-7: 32px;\n}\n<\/pre><\/div>\n\n\n<p>Please see the <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/customizing-css\/\">&#8220;Customizing CSS&#8221;<\/a> article for more information on how to modify calendar styles using the calendar&#8217;s CSS classes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-setting-minimum-and-maximum-font-sizes\">Setting minimum and maximum font sizes<\/h2>\n\n\n\n<p>The Events Calendar includes what we call &#8220;safety brakes&#8221; that prevent the calendar&#8217;s font sizes from being too small or large.<\/p>\n\n\n\n<p>These minimum and maximum font sizes can be filtered:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>tribe_customizer_minimum_font_size()<\/code>: Sets the minimum, or smallest, font size.<\/li><li><code>tribe_customizer_maximum_font_size<\/code>: Sets the maximum, or largest, font size.<\/li><\/ul>\n\n\n\n<p>To change the smallest font size to <code>10px<\/code> and the largest font size to <code>32px<\/code>, you could add something like this to your <code>functions.php<\/code> file or wherever you manage your theme snippets:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nadd_filter(\n  &#039;tribe_customizer_minimum_font_size&#039;,\n  function() {\n    return 10; \/\/ sets the minimum font size to 10px\n  }\n);\n\nadd_filter(\n  &#039;tribe_customizer_maximum_font_size&#039;,\n  function() {\n    return 32; \/\/ sets the maximum font size to 32px\n  }\n);\n<\/pre><\/div>\n\n\n<div class=\"wp-block-group has-text-color has-background\" style=\"background-color:var(--global-palette8);color:#141827\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>\ud83d\udc4b Note that the values in the example are plain integers. Those correspond to pixel units, and the unit is not required.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-example\">Example<\/h2>\n\n\n\n<p>Let&#8217;s say your body text font that the calendar uses is most cases, but your theme uses a different font family for headings, like post titles, and you want that to be consistent on event posts. You explore your CSS a bit and find the font stack your theme uses for those headings:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.heading-class-name {\n  font-family: &quot;Palatino Linotype&quot;, Palatino, Palladio, &quot;URW Palladio L&quot;, &quot;Book Antiqua&quot;, Baskerville, &quot;Bookman Old Style&quot;, &quot;Bitstream Charter&quot;, &quot;Nimbus Roman No9 L&quot;, Garamond, &quot;Apple Garamond&quot;, &quot;ITC Garamond Narrow&quot;, &quot;New Century Schoolbook&quot;, &quot;Century Schoolbook&quot;, &quot;Century Schoolbook L&quot;, Georgia, serif;\n}\n<\/pre><\/div>\n\n\n<p>There&#8217;s a long list of fonts! It&#8217;s actually pretty common to provide a list of fonts like this. In fact, it&#8217;s called a &#8220;font stack&#8221; where each font after the first represents a &#8220;fallback&#8221; in the event that the font before it fails to load for some reason.<\/p>\n\n\n\n<p>We can apply the same font &#8220;stack&#8221; the theme uses to the CSS classes the calendar uses for its headings:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-common .tribe-common-h1,\n.tribe-common .tribe-common-h2,\n.tribe-common .tribe-common-h3,\n.tribe-common .tribe-common-h4,\n.tribe-common .tribe-common-h5,\n.tribe-common .tribe-common-h6 {\n  --tec-font-family-sans-serif:&quot;Palatino Linotype&quot;, Palatino, Palladio, &quot;URW Palladio L&quot;, &quot;Book Antiqua&quot;, Baskerville, &quot;Bookman Old Style&quot;, &quot;Bitstream Charter&quot;, &quot;Nimbus Roman No9 L&quot;, Garamond, &quot;Apple Garamond&quot;, &quot;ITC Garamond Narrow&quot;, &quot;New Century Schoolbook&quot;, &quot;Century Schoolbook&quot;, &quot;Century Schoolbook L&quot;, Georgia, serif;\n  --tec-font-family-base:&quot;Palatino Linotype&quot;, Palatino, Palladio, &quot;URW Palladio L&quot;, &quot;Book Antiqua&quot;, Baskerville, &quot;Bookman Old Style&quot;, &quot;Bitstream Charter&quot;, &quot;Nimbus Roman No9 L&quot;, Garamond, &quot;Apple Garamond&quot;, &quot;ITC Garamond Narrow&quot;, &quot;New Century Schoolbook&quot;, &quot;Century Schoolbook&quot;, &quot;Century Schoolbook L&quot;, Georgia, serif;\n}\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/08\/Screen-Shot-2021-08-02-at-14.37.11.png\" alt=\"\" class=\"wp-image-1950556\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>We strive to have all our views, widgets, and shortcodes have a unified style so that they all just go together. Sometimes though, that style doesn&#8217;t mesh with the site&#8217;s theme. That&#8217;s why we provided a number of configurable options in the WordPress Customizer. One common request we see is the ability to change the&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[1],"tags":[],"stellar-product-taxonomy":[],"class_list":["post-1950548","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"taxonomy_info":{"category":[{"value":1,"label":"Uncategorized"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":1,"name":"Uncategorized","slug":"uncategorized","term_group":0,"term_taxonomy_id":1,"taxonomy":"category","description":"","parent":0,"count":139,"filter":"raw","term_order":"0","cat_ID":1,"category_count":139,"category_description":"","cat_name":"Uncategorized","category_nicename":"uncategorized","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1950548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1950548"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1950548\/revisions"}],"predecessor-version":[{"id":1955920,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1950548\/revisions\/1955920"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1950548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1950548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1950548"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1950548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}