{"id":8712,"date":"2018-05-25T09:41:38","date_gmt":"2018-05-25T09:41:38","guid":{"rendered":"https:\/\/kriesi.at\/documentation\/enfold\/?p=8712"},"modified":"2022-10-30T19:31:48","modified_gmt":"2022-10-30T19:31:48","slug":"typography","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"<p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2ziffc-e27cce76a948bcb9b3637eb7b4ab2e99\">\n#top .av-special-heading.av-2ziffc-e27cce76a948bcb9b3637eb7b4ab2e99{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-2ziffc-e27cce76a948bcb9b3637eb7b4ab2e99 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-2ziffc-e27cce76a948bcb9b3637eb7b4ab2e99 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-2ziffc-e27cce76a948bcb9b3637eb7b4ab2e99 av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Typography<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div><br \/>\n<div  class='hr av-2ar83c-d9a70dd4ba59e45ae7829ddcdcd2ada7 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jhlsjl03-9b529e3f279ac50d9f6f7e4dc9665922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jhlsjl03-9b529e3f279ac50d9f6f7e4dc9665922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Enfold makes it easy to have a consistent typography across the site. By default enfold comes loaded with many websafe and google fonts, for some reason if you need to use a custom font that suits your design or to comply with GDPR.\u00a0With the release of Enfold\u00a04.4\u00a0users can now upload any custom fonts or google fonts from Enfold theme options \ud83d\ude09<br \/>\nCommon fonts like body, p, strong, headings, menu, buttons and titles can be changed from <strong>Enfold > Advanced styling<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7908\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Typography-e1527245767948.png\" alt=\"\" width=\"948\" height=\"339\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Typography-e1527245767948.png 948w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Typography-e1527245767948-300x107.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Typography-e1527245767948-768x275.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Typography-e1527245767948-705x252.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Typography-e1527245767948-600x215.png 600w\" sizes=\"auto, (max-width: 948px) 100vw, 948px\" \/><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-88chd4-e2c8444ecf13713c042c218b85130fea hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jhlsjl03-9b529e3f279ac50d9f6f7e4dc9665922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>General font options<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jhlsjl03-9b529e3f279ac50d9f6f7e4dc9665922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>A quick look at font options to change font family, size and color for common elements such as body, paragraph, menu items, titles, headings, etc. Font styles can be separately applied to different sections such as the logo area, content area, footer, primary and secondary sections.<br \/>\nColor of the elements in the below groups can be changed from Enfold > General Styling >\u00a0 Select a section like a logo area, footer, etc.<\/p>\n<ul>\n<li><strong>Primary group<\/strong>: Consist of elements such as active menu item, menu hover, strong tag, button color, content links, footer links, drop caps.<\/li>\n<li><strong>Secondary group<\/strong>: will affect blockquotes, form placeholder text, widgets, widget titles, pagination, playlist time and meta content of elements like\u00a0the team members, blog post etc.<\/li>\n<li><strong>Highlight group<\/strong>: is made up of link hover color in the content area, links in meta content, footer,\u00a0 button color on hover, etc.<\/li>\n<\/ul>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-6be9so-da9ac7fcef89b85da91123a72aa93d9a av-minimal-toggle  avia-builder-el-7  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-37dzrc-5dad562561f0a95a8bcb480e464d17f8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Body Font\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Body Font\" data-aria_expanded=\"Click to collapse: Body Font\">Body Font<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Default font family, size and color\u00a0 for content sections like body, paragraph, etc can be changed from<br \/>\n<strong>Body font family:<br \/>\n<\/strong>Enfold > General Styling > Fonts >\u00a0Font for your body text<br \/>\n<strong>Body font size<\/strong>:<br \/>\nEnfold > General Styling > Fonts >\u00a0Default content font size<br \/>\n<strong>Body font color<\/strong>:<br \/>\nEnfold > General Styling > Main Content > Main Content font color<br \/>\nTo add your own custom style to the body text like may be a text shadow or other effects it can be done using custom CSS. The CSS selectors you can use are:<br \/>\n<code>body {<br \/>\n  \/* Your styles here *\/<br \/>\n  font-size: 14px;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-4jf14o-187ecfc93c9d3cf368797cf75299dfab'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"Paragraph text\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Paragraph text\" data-aria_expanded=\"Click to collapse: Paragraph text\">Paragraph text<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Paragraph font color<\/strong>: By default, paragraph text inherits the body font color set in the theme options. Unique color\u00a0can be applied to the paragraph text from the text block element pop up options. Color\u00a0set in the text block element options will override the default\u00a0color\u00a0applied to paragraph text by the theme.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8750\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/textblock-color-1.png\" alt=\"\" width=\"704\" height=\"338\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/textblock-color-1.png 704w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/textblock-color-1-300x144.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/textblock-color-1-600x288.png 600w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" \/><br \/>\n<strong>Paragraph font size<\/strong>: Paragraph inherits the body font size by default but as you already know that a different color can be set individually. Font size of the paragraph can also be changed individually for each paragraph text and this will override the default font size set in the theme options.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8752\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/text-size.png\" alt=\"\" width=\"589\" height=\"540\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/text-size.png 589w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/text-size-300x275.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-329vo8-5335f71647640f6355178c04dfc135ab'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"Strong\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Strong\" data-aria_expanded=\"Click to collapse: Strong\">Strong<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Strong font color<\/strong>: Strong tag is a part of primary element group and it inherits the primary\u00a0color\u00a0set in the theme options under Enfold > General Styling > Main Content > primary color<br \/>\nAlternatively, the strong color can also be changed sitewide using the below custom CSS:<\/p>\n<pre><code>.main_color strong, .alternate_color strong { color: blue; }\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3rcve0-381d62984f2f5167c74a4247a0f4ea4c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"Blockquotes\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Blockquotes\" data-aria_expanded=\"Click to collapse: Blockquotes\">Blockquotes<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Blockquotes color<\/strong>: Blockquotes is grouped as a secondary element and it inherits the secondary\u00a0color\u00a0set in the theme options under:<br \/>\nEnfold > General Styling > Main Content > secondary\u00a0color.<br \/>\n<strong>Other styles<\/strong>: Styles set in Advanced styling will override the secondary group style. Advanced styling gives more customization options like border, font size etc along with color it can be accessed from:<br \/>\nEnfold > Advanced styling > Blockquotes<br \/>\nAlternatively, custom CSS style can be applied to fully customize the blockquotes. The below element has a custom CSS class &#8220;blockquote-style-1&#8221; applied to it:<\/p>\n<blockquote class=\"blockquote-style-1\">\n<p>It is always the simple that produces the marvelous.<\/p>\n<\/blockquote>\n<p><strong>Code Snippet<\/strong>:<\/p>\n<pre><code>\n\/*----------------------------------------\n\/\/ Blockquotes\n\/\/--------------------------------------*\/\n#top .main_color blockquote.blockquote-style-1{\n  font-family:Open Sans;\n  font-style:italic;\n  color: #FFF;\n  padding:25px 15px 15px 30px;\n  border-left:8px solid #537b35 ;\n  background:#2dde98;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-26aors-095bf51ee201347941dcddb4e0536b4e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"List\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: List\" data-aria_expanded=\"Click to collapse: List\">List<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A text-based\u00a0<strong>List <\/strong>can be created using the list icon in the text editor. A list item inherits the default color and size set for the body font.\u00a0 However, the font color and size can be changed in the text block option similar to the paragraph text.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8763 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/list-e1527309351674.png\" alt=\"\" width=\"573\" height=\"444\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/list-e1527309351674.png 573w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/list-e1527309351674-300x232.png 300w\" sizes=\"auto, (max-width: 573px) 100vw, 573px\" \/><br \/>\n<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-4o5utk-d7f786b48dcdab4d5e7736919b0c0be8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"Link text\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Link text\" data-aria_expanded=\"Click to collapse: Link text\">Link text<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A text link in a paragraph, widget area or blog posts is part of the primary element group. We can assign a different link color\u00a0for each section\u00a0(Logo area, Main content, Alternate content or Footer area) from the theme options.<br \/>\n<strong>Enfold > General Styling ><\/strong> Select the content area and update the <strong>Primary Color<\/strong> and <strong>Highlight Color\u00a0<\/strong>( Highlight color\u00a0affect the hover color of the links).<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2z4hvs-fe6be39067341cfe3deaf27819b4aa42'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-7' data-fake-id='#toggle-id-7' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-7' data-slide-speed=\"200\" data-title=\"Heading Fonts\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Heading Fonts\" data-aria_expanded=\"Click to collapse: Heading Fonts\">Heading Fonts<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-7' aria-labelledby='toggle-toggle-id-7' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><ul>\n<li>If the headings\u00a0are\u00a0created using the text editor the headings will inherit the body font color.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8765\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/headings-e1527310977338.png\" alt=\"\" width=\"567\" height=\"310\" \/><\/li>\n<li>If the headings are created using the &#8220;Special heading&#8221; element the color set in the theme options will be applied\u00a0sitewide.<br \/>\n<strong>Enfold > General Styling > Main Content > Main Content Heading color<\/strong><strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8767\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Heading.png\" alt=\"\" width=\"713\" height=\"377\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Heading.png 993w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Heading-300x159.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Heading-768x406.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Heading-710x375.png 710w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Heading-705x373.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Heading-600x317.png 600w\" sizes=\"auto, (max-width: 713px) 100vw, 713px\" \/><br \/>\n<\/strong>The special heading element\u00a0has an option to select a different pre-styled heading and customize margins, paddings and color.<strong><br \/>\n<\/strong><\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1zmf2w-aa37210732335e2b93d1d3200c808a91'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-8' data-fake-id='#toggle-id-8' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-8' data-slide-speed=\"200\" data-title=\"Main Menu\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Main Menu\" data-aria_expanded=\"Click to collapse: Main Menu\">Main Menu<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-8' aria-labelledby='toggle-toggle-id-8' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>For a detailed overview of the menu items and styling options please visit the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/menu\/#menu-style-and-settings\" target=\"_blank\" rel=\"noopener noreferrer\">menu section<\/a>.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2sjvd4-7d6de3f544009f1169c34d846be8ec3b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-9' data-fake-id='#toggle-id-9' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-9' data-slide-speed=\"200\" data-title=\"Buttons\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Buttons\" data-aria_expanded=\"Click to collapse: Buttons\">Buttons<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-9' aria-labelledby='toggle-toggle-id-9' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>For more details and styling options available for buttons please visit the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/button\/\" target=\"_blank\" rel=\"noopener noreferrer\">button section<\/a>.<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-88chd4-e2c8444ecf13713c042c218b85130fea hr-default  avia-builder-el-8  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jhlsjl03-9b529e3f279ac50d9f6f7e4dc9665922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Dropcaps<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jhlsjl03-9b529e3f279ac50d9f6f7e4dc9665922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Drop caps can be inserted using the magic wand shortcode tool or you can directly use the shortcode in the text editor.<\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4nw8x4-b91a42afb75791e699bfbb7086e507b7\">\n.flex_column.av-4nw8x4-b91a42afb75791e699bfbb7086e507b7{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-4nw8x4-b91a42afb75791e699bfbb7086e507b7 av_one_half first flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-gf0k8-fc8ae8a0fcbfbd46b5bfc0d1edccff87 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>H<\/span>ello\u00a0I&#8217;m a simple drop cap.\u00a0Letraset sheets containing Lorem passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/p>\n<\/div><\/section><\/div><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6\">\n.flex_column.av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6 av_one_half flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-48ckrs-f63edc075c6f2b5f1605f9e026f15f60 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><span class='av_dropcap2 av-av_dropcap2-bd3e2e98007e8df5c1bbaff1392a902e'>I<\/span> am a drop cap with background color. More recently with desktop publishing software like Aldus PageMaker including versions.<\/p>\n<\/div><\/section><\/div><br \/>\n<section  class='av_textblock_section av-anduag-ceb6b886fbfdae45768ff12daeacfc83 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-9dm90o-1d47e9f20543bafb38a24334fcc3426f av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-2x24ew-434b3aa89d2e7d32458947f4a3688db8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-10' data-fake-id='#toggle-id-10' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-10' data-slide-speed=\"200\" data-title=\"Shortcode\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Shortcode\" data-aria_expanded=\"Click to collapse: Shortcode\">Shortcode<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-10' aria-labelledby='toggle-toggle-id-10' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><script src=\"https:\/\/gist.github.com\/vinaynkashyap\/a113a9f668cadc642f7d62195a13f772.js\"><\/script><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-88chd4-a4ac2a8efe3c3c40310084b631260f24\">\n#top .hr.hr-invisible.av-88chd4-a4ac2a8efe3c3c40310084b631260f24{\nheight:30px;\n}\n<\/style>\n<div  class='hr av-88chd4-a4ac2a8efe3c3c40310084b631260f24 hr-invisible  avia-builder-el-11  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-anduag-bbc7e04fd1c79120b526eb4cf1249a9b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Dropcap\u00a0Custom Style<\/strong><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-anduag-bbc7e04fd1c79120b526eb4cf1249a9b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Drop cap element can be custom styled using the CSS code. You can add text shadow backgrounds and border style to decorate it as per your needs. To begin\u00a0with, add the custom class in the drop cap shortcode <strong>custom_class=&#8221;av-dropcap-style-1&#8243;<\/strong>.<\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cjm9s-0deb2075d5c5e78fad533a660707b076\">\n.flex_column.av-4cjm9s-0deb2075d5c5e78fad533a660707b076{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-4cjm9s-0deb2075d5c5e78fad533a660707b076 av_one_fourth first flex_column_div av-zero-column-padding  '     ><\/div><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6\">\n.flex_column.av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6 av_one_half  avia-builder-el-14  el_after_av_textblock  el_before_av_one_half  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-48ckrs-735e19a0234a2a8e04422bfe837df085 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><span class='av_dropcap1 av-av_dropcap1-a8681c61b7436e53782e15624f5ad31b av-dropcap-style-1'>W<\/span>hatever your budget and whatever the size of car you are looking for,\u00a0we are sure we can help you find what\u2019s right for you. We sell new and used cars from Pollos to Porchas. To fully appreciate the range of cars we have on offer please visit one of our showrooms.<\/p>\n<\/div><\/section><\/div><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6\">\n.flex_column.av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-4cjm9s-4461455d163e16f6b176d8dd0a9d53b6 av_one_fourth flex_column_div av-zero-column-padding  '     ><\/div><br \/>\n<section  class='av_textblock_section av-9noh54-2c7277588e13e976282171020f35f6e2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-73okqw-761e46e268d6c65ba62e31af79793317 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-5ri6h4-77e6cb1dcfe28bec304fe694de00b64c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-11' data-fake-id='#toggle-id-11' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-11' data-slide-speed=\"200\" data-title=\"Shortcode\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Shortcode\" data-aria_expanded=\"Click to collapse: Shortcode\">Shortcode<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-11' aria-labelledby='toggle-toggle-id-11' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2edyvs-63cc427c1d4012be0889fb562f417696'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-12' data-fake-id='#toggle-id-12' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-12' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-12' aria-labelledby='toggle-toggle-id-12' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \n\/*----------------------------------------\n\/\/ CSS - Drop caps style -1 \n\/\/--------------------------------------*\/\n .av-dropcap-style-1.av_dropcap1 {\ncolor:#ff4c4c;\nfont-size:5em;\nline-height:80%;\npadding-right: .05em;\nfont-family: Raleway, sans-serif;\nfont-weight: 800;\ntext-transform:uppercase;\ntext-shadow:.025em .030em 0 #fbb034;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-1ye9ko-392eea24885aac707c8b30f1ba550a11 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-anduag-bbc7e04fd1c79120b526eb4cf1249a9b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2><strong>Customization<\/strong><\/h2>\n<\/div><\/section><br \/>\n<div  class='avia-builder-widget-area clearfix '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div><br \/>\n<div  class='hr av-1ye9ko-392eea24885aac707c8b30f1ba550a11 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-anduag-bbc7e04fd1c79120b526eb4cf1249a9b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 id=\"how-to-upload-custom-fonts\">How to upload custom fonts<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-anduag-bbc7e04fd1c79120b526eb4cf1249a9b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Custom font uploader is one of the major additions to Enfold version 4.4. As the name say&#8217;s, Custom font uploader makes it very easy to upload the fonts from your computer to your\u00a0website and use it in compliance with <a href=\"https:\/\/kriesi.at\/archives\/enfold-4-4-and-the-gdpr-general-data-protection-regulation\" target=\"_blank\" rel=\"noopener noreferrer\">GDPR<\/a>. Let us look at some key points related to using self-hosted fonts.<\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-73okqw-761e46e268d6c65ba62e31af79793317 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-7el0x8-7e4a77feb955abe3bb3c867cefdea9b0'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-13' data-fake-id='#toggle-id-13' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-13' data-slide-speed=\"200\" data-title=\"Supported Font Formats\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Supported Font Formats\" data-aria_expanded=\"Click to collapse: Supported Font Formats\">Supported Font Formats<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-13' aria-labelledby='toggle-toggle-id-13' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The\u00a0font formats supported by the Custom Font Manager are listed below:<\/p>\n<ul>\n<li>ttf<\/li>\n<li>eot<\/li>\n<li>woff<\/li>\n<li>woff2<\/li>\n<li>svg<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3962uw-f475360da171f3e248415bfe5f7cb64c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-14' data-fake-id='#toggle-id-14' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-14' data-slide-speed=\"200\" data-title=\"Optimizing fonts\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Optimizing fonts\" data-aria_expanded=\"Click to collapse: Optimizing fonts\">Optimizing fonts<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-14' aria-labelledby='toggle-toggle-id-14' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To use a font which is very heavy on loading or a font may exist in &#8220;otf&#8221;\u00a0 or other non-supported formats, we need to first convert the &#8220;otf&#8221; font to a supported format such as &#8220;woff&#8221; or &#8220;woff2&#8221;\u00a0 using a <a href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" target=\"_blank\" rel=\"noopener noreferrer\">font kit generator<\/a>.<\/p>\n<ul>\n<li>Upload the &#8220;otf&#8221; fonts and generate the font kit.<\/li>\n<li>Download the font kit and extract the &#8220;woff&#8221;\u00a0and &#8220;woff2&#8221; files.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3ww7ek-e106a3ecfd51ec98bfdd9bfe77a63b44'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-15' data-fake-id='#toggle-id-15' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-15' data-slide-speed=\"200\" data-title=\"File structure\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: File structure\" data-aria_expanded=\"Click to collapse: File structure\">File structure<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-15' aria-labelledby='toggle-toggle-id-15' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>For the uploaded fonts to work correctly please follow the file\/folder structure as mentioned below.<\/p>\n<ul>\n<li><strong>Do Not Add<\/strong>\u00a0subdirectories.<\/li>\n<li><strong>Do Not Add<\/strong>\u00a0CSS\u00a0or HTML files.<\/li>\n<li><strong>Do Not Add<\/strong>\u00a0non-supported font formats.<\/li>\n<li><strong>Do Not Add<\/strong>\u00a0multiple font\u00a0families in one folder.<\/li>\n<li><strong>Do Not Add<\/strong>\u00a0ttf, woff or other uncompressed fonts directly to the theme.<\/li>\n<\/ul>\n<p><em><strong>Note<\/strong><\/em>: To proceed further you should have the font files in the supported format as mentioned above.<br \/>\n<strong>Uploading one font at a time:<\/strong><br \/>\nIn a typical case, we have\u00a0to upload:<\/p>\n<ul>\n<li>my-font-1.ttf<\/li>\n<li>my-font-2.ttf<\/li>\n<li>my-font-3.ttf<\/li>\n<\/ul>\n<p>Compress each font as a separate zip file: Right click on <strong>my-font-1.ttf<\/strong>\u00a0and select compress or zip option to generate a compressed file\u00a0<strong>my-font-1.zip\u00a0<\/strong>repeat this step for the rest of the fonts till you have.<\/p>\n<ul>\n<li>my-font-1.zip<\/li>\n<li>my-font-2.zip<\/li>\n<li>my-font-3.zip<\/li>\n<\/ul>\n<p><strong>Uploading multiple fonts: <\/strong>Each font and\u00a0its variants should be in its own folder.<br \/>\nIn the below example we have placed each font and its variants in separate folders:<\/p>\n<ul>\n<li><strong>my-font-1 ( Folder )<\/strong>\n<ul>\n<li>my-font-1-regular.ttf<\/li>\n<li>my-font-1-thin.ttf<\/li>\n<li>my-font-1-light.ttf<\/li>\n<li>my-font-1-bold.ttf<\/li>\n<\/ul>\n<\/li>\n<li><strong>my-font-2\u00a0( Folder )<\/strong>\n<ul>\n<li>my-font-2-regular.ttf<\/li>\n<li>my-font-2-light.ttf<\/li>\n<li>my-font-2-bold.ttf<\/li>\n<\/ul>\n<\/li>\n<li><strong>my-font-3\u00a0( Folder )<\/strong>\n<ul>\n<li>my-font-3-thin.ttf<\/li>\n<li>my-font-3-light.ttf<\/li>\n<li>my-font-3-bold.ttf<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>To upload the above fonts at once, select all the font folders (my-font-1,\u00a0my-font-2,\u00a0my-font-3) and compress it. Give the compressed file any name of your choice, for example,\u00a0<strong>project-fonts.zip <\/strong>\u00a0The zip file is now ready to upload.<br \/>\n<em><strong>NOTE<\/strong><\/em>: Do not add the font folders in one main folder as this will create sub-directories and it is not a supported format.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2qckik-bae4ead70a509761117879e8b0506bae'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-16' data-fake-id='#toggle-id-16' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-16' data-slide-speed=\"200\" data-title=\"Naming conventions\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Naming conventions\" data-aria_expanded=\"Click to collapse: Naming conventions\">Naming conventions<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-16' aria-labelledby='toggle-toggle-id-16' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>You only have to follow the naming conventions used by Google: &#8220;_&#8221; or &#8220;-&#8221; are interpreted as space.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2cx13w-f6cc9edb5cde2eee0416a5bdd1c435be'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-17' data-fake-id='#toggle-id-17' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-17' data-slide-speed=\"200\" data-title=\"Managing font variants\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Managing font variants\" data-aria_expanded=\"Click to collapse: Managing font variants\">Managing font variants<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-17' aria-labelledby='toggle-toggle-id-17' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>There are a couple of ways to upload and manage font variants. In the first method, the variants will be auto-selected by the theme stylesheet. In the second method, we can manually assign the font variants to a specific element of the theme.<br \/>\n<strong>Method 1: Auto-assign variants <\/strong><br \/>\nIn this method, a\u00a0folder containing font\u00a0variants is compressed and uploaded. The font variants will be auto-assigned by the theme stylesheet. Let&#8217;s take Roboto font family as an example and below is the file structure in which it needs to be uploaded.<\/p>\n<ul>\n<li><strong>Roboto.zip <\/strong>(Compressed folder containing font variants)\n<ul>\n<li>Roboto-thin<strong>.ttf<\/strong><\/li>\n<li>Roboto-light<strong>.ttf<\/strong><\/li>\n<li>Roboto-medium<strong>.ttf<\/strong><\/li>\n<li>Roboto-regular<strong>.ttf<\/strong><\/li>\n<li>Roboto-bold<strong>.ttf<\/strong><\/li>\n<li>Roboto-black<strong>.ttf<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Upload the Roboto font family as a single zip file from <strong>Enfold > Import\/Export > Custom font\u00a0manager<\/strong> the font upload page will refresh and display the font family with its variants.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8858\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-1.png\" alt=\"\" width=\"474\" height=\"222\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-1.png 474w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-1-300x141.png 300w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><br \/>\nWhen Roboto font family is assigned as a default font from<strong> Enfold > General Styling > Fonts<\/strong> tab the font weight is auto-assigned to body and headings by the theme stylesheet.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8860\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-1.png\" alt=\"\" width=\"1002\" height=\"635\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-1.png 1002w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-1-300x190.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-1-768x487.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-1-705x447.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-1-600x380.png 600w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><br \/>\n<strong>Method 2: Manually assign font variants <\/strong><br \/>\nThis method is recommended if you do not have a lot of fonts, each font\u00a0variant is compressed and uploaded separately so that we can manually assign the font variants to any element of the theme.\u00a0Let&#8217;s take Roboto font family as an example and below is the file structure in which it needs to be uploaded.<\/p>\n<ul>\n<li>Roboto-thin<strong>.zip<\/strong><\/li>\n<li>Roboto-light<strong>.zip<\/strong><\/li>\n<li>Roboto-medium<strong>.zip<\/strong><\/li>\n<li>Roboto-regular<strong>.zip<\/strong><\/li>\n<li>Roboto-bold<strong>.zip<\/strong><\/li>\n<li>Roboto-black<strong>.zip<\/strong><\/li>\n<\/ul>\n<p>Upload each of the Roboto family variants as a single zip file from <strong>Enfold > Import\/Export > Custom font\u00a0manager<\/strong> the font upload page will refresh every time and display the font variants as seen below.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8863\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-2.png\" alt=\"\" width=\"483\" height=\"615\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-2.png 483w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-2-236x300.png 236w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><br \/>\nNow we can assign each of the font variants of the Roboto family to any specific element of the theme from<br \/>\n<strong>Enfold > General Styling > Fonts<\/strong><br \/>\n<strong>Enfold > Advanced Styling > <\/strong>Select any element<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8864\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-2.png\" alt=\"\" width=\"1007\" height=\"665\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-2.png 1007w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-2-300x198.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-2-768x507.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-2-705x466.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-2-600x396.png 600w\" sizes=\"auto, (max-width: 1007px) 100vw, 1007px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-1ye9ko-9b98fdaafce3aa6a970e19880615ee03\">\n#top .hr.hr-invisible.av-1ye9ko-9b98fdaafce3aa6a970e19880615ee03{\nheight:20px;\n}\n<\/style>\n<div  class='hr av-1ye9ko-9b98fdaafce3aa6a970e19880615ee03 hr-invisible'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-anduag-bbc7e04fd1c79120b526eb4cf1249a9b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Uploading the fonts is pretty straightforward.<\/p>\n<ul>\n<li>Download and prepare your\u00a0fonts (please see file structure for more info).<\/li>\n<li>Compress the folder\/file in zip format and upload to Enfold > Import\/Export > Custom Font Manager.<\/li>\n<li>After successfully adding new fonts in the correct format, the upload page will reload\u00a0and display the font family.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-1.png\" alt=\"\" width=\"474\" height=\"222\" class=\"alignnone size-full wp-image-8858\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-1.png 474w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-upload-1-300x141.png 300w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/li>\n<li>The uploaded font should show in the <strong>Custom uploaded fonts<\/strong> list where ever font family can be assigned like under\u00a0 <strong>Enfold > General Styling > Fonts<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8856\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-e1527759757671.png\" alt=\"\" width=\"493\" height=\"333\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-e1527759757671.png 493w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-list-1-e1527759757671-300x203.png 300w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><br \/>\n.<\/li>\n<\/ul>\n<p>NOTE: Fonts can only be uploaded as compressed zip files for more information please check file structure section above.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1ye9ko-392eea24885aac707c8b30f1ba550a11 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jhsb0x1w-4556c0d983683ac4c9f73eae4489e1a9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to identify the fonts?<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jhsb090r-abb3bc56c17b68c002b413e7c442648d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>How many times has this happened to most of us? while browsing\u00a0a website or checking out a print magazine\/flyer the font looks great but we do not know which font is used? well, there are many tools available\u00a0to identify the font. Sometimes these tools are not 100% accurate but quite reliable.<br \/>\n<strong>Web based<\/strong><br \/>\n<a href=\"https:\/\/www.myfonts.com\/WhatTheFont\/\" target=\"_blank\" rel=\"noopener noreferrer\">What the font<\/a><br \/>\n<a href=\"https:\/\/www.fontsquirrel.com\/matcherator\" target=\"_blank\" rel=\"noopener noreferrer\">Matcherator<\/a><br \/>\n<strong>Browser tool<\/strong><br \/>\nPopular web browsers such as chrome and firefox have many browser extensions one of them which has worked very well for me is <a href=\"http:\/\/www.chengyinliu.com\/whatfont.html\" target=\"_blank\" rel=\"noopener noreferrer\">WhatFont<\/a>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8815\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/WhatFont.png\" alt=\"\" width=\"1116\" height=\"532\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/WhatFont.png 1116w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/WhatFont-300x143.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/WhatFont-768x366.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/WhatFont-1030x491.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/WhatFont-705x336.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/WhatFont-600x286.png 600w\" sizes=\"auto, (max-width: 1116px) 100vw, 1116px\" \/><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1ye9ko-392eea24885aac707c8b30f1ba550a11 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jhsb0x1w-4556c0d983683ac4c9f73eae4489e1a9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Where to find fonts for my\u00a0projects?<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jhsb0x1w-4556c0d983683ac4c9f73eae4489e1a9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>There are many websites which offer both free and paid fonts you can choose for your projects, below is a list of some popular websites:<br \/>\n<a href=\"http:\/\/www.google.com\/webfonts\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a><br \/>\n<a href=\"https:\/\/www.behance.net\/search?search=free+font\" target=\"_blank\" rel=\"noopener noreferrer\">Behance<\/a><br \/>\n<a href=\"https:\/\/www.fontsquirrel.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Squirrel<\/a><br \/>\n<a href=\"http:\/\/www.fontspace.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Space<\/a><br \/>\n<a href=\"https:\/\/fontlibrary.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Library<\/a><br \/>\n<a href=\"http:\/\/www.dafont.com\" target=\"_blank\" rel=\"noopener noreferrer\">daFont<\/a><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1ye9ko-392eea24885aac707c8b30f1ba550a11 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jhsb0x1w-4556c0d983683ac4c9f73eae4489e1a9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Font pairing<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jhsb0x1w-4556c0d983683ac4c9f73eae4489e1a9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>There are many articles available to learn how to combine fonts to create interesting typography. There are also a few dedicated sites which regularly publish new font combinations which helps you take a look at a large library of fonts that work well together.<br \/>\n<a href=\"http:\/\/fontjoy.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fontjoy<\/a><br \/>\n<a href=\"http:\/\/typ.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">typ<\/a><br \/>\n<a href=\"http:\/\/fontpair.co\" target=\"_blank\" rel=\"noopener noreferrer\">fontpair<\/a><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1ye9ko-392eea24885aac707c8b30f1ba550a11 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jhlsjl03-9b529e3f279ac50d9f6f7e4dc9665922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to download Google fonts<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jhlsjl03-9b529e3f279ac50d9f6f7e4dc9665922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>There are many web font services like Google Fonts, Typekit and several others. Web font services use a CDN to deliver the fonts. If a user who visits a website other than yours has already downloaded the same fonts which is used on your site then the CDN signals the browser not to download the same fonts again. This will result in your site loading much faster.<br \/>\nGoogle fonts are the most popular and more the site is popular chances are the font which you are going to use on your site is already on many users computer which makes your site load faster for all the users who use the same font.<br \/>\nDue to the recent <a href=\"https:\/\/kriesi.at\/archives\/enfold-4-4-and-the-gdpr-general-data-protection-regulation\" target=\"_blank\" rel=\"noopener noreferrer\">GDPR act<\/a> many users started to host their own fonts. Google fonts can also be downloaded and self-hosted ( No license is required ).<br \/>\n<strong>To download google fonts<\/strong>:<\/p>\n<ul>\n<li>Visit\u00a0<a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">fonts.google.com\u00a0<\/a> and browse the fonts you like.<\/li>\n<li>Click the plus sign to add the font to select basket.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8882\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/add-font.png\" alt=\"\" width=\"358\" height=\"365\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/add-font.png 358w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/add-font-294x300.png 294w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/add-font-36x36.png 36w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/li>\n<li>A select basket appears at the bottom of the screen.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8883\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-basket.png\" alt=\"\" width=\"663\" height=\"83\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-basket.png 663w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-basket-300x38.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-basket-600x75.png 600w\" sizes=\"auto, (max-width: 663px) 100vw, 663px\" \/><\/li>\n<li>Click on the select basket to expand it.<\/li>\n<li>Look for the download button on top right.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8884 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-download-e1527814656755.png\" alt=\"\" width=\"637\" height=\"243\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-download-e1527814656755.png 637w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-download-e1527814656755-300x114.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/font-download-e1527814656755-600x229.png 600w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/li>\n<li>Hover the mouse on the download button and click the download link to download the fonts.<\/li>\n<\/ul>\n<p><strong>Download all google fonts at once<\/strong>:<br \/>\nYou can download all Google Fonts in a simple ZIP snapshot (over 300MB) from <a href=\"https:\/\/github.com\/google\/fonts\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Google fonts archive.<\/a><br \/>\n<strong>Additional Resource:<br \/>\n<\/strong>For additional resources like eot, ttf, svg, woff and woff2 files and CSS snippets please visit <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/fonts\" target=\"_blank\" rel=\"noopener noreferrer\">Google Webfont Helper<\/a>.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-1ye9ko-392eea24885aac707c8b30f1ba550a11 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-13u6q8-c6cade46ebd2b60b8a04e51128cb0db7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to add google fonts using CSS<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-xp22w-b78d14e18aa7660f359e5abe663367dd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add any google font using CSS to any Enfold theme element:<br \/>\nOpen Google fonts website and choose your font families. Click on &#8220;Selected families&#8221; at the bottom and copy the font families.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5782\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/google-font.png\" alt=\"\" width=\"748\" height=\"630\" \/><br \/>\nFor example:<\/p>\n<pre><code>\nfont-family: 'Mukta Mahee', sans-serif;\nfont-family: 'Open Sans', sans-serif;\nfont-family: 'Roboto', sans-serif;\n<\/code><\/pre>\n<p>Now you can easily assign this to any element of the theme using CSS as shown below:<\/p>\n<pre><code>\nh2 {\n   font-family: 'Mukta Mahee', sans-serif;\n}\n<\/code><\/pre>\n<p>Note: If the font does not change please refresh the browser cache or try adding the word !important after the font family name.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-snil4-ece8e90845fd72d52ce920208a97dc98 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jtw68-5fa9450d390c43bd91fb91f9555b63cb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Register Additional Google Fonts for Theme Options<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jhsp72ft-1d558ebfec7a0e21cac96f9a91e52bf9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add additional google fonts to theme options please check &#8220;<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/typography\/#how-to-upload-custom-fonts\" target=\"_blank\" rel=\"noopener noreferrer\">how to upload custom fonts<\/a>&#8221; section.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-snil4-ece8e90845fd72d52ce920208a97dc98 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jtw68-caa11f23e49876dbb935b05403af93b9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Performance and page speed<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jtw68-caa11f23e49876dbb935b05403af93b9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Self-hosted fonts can increase the loading time quite significantly, hence it&#8217;s recommended to only use custom fonts which are absolutely required. You can also convert the ttf font files to woff or woff2 which will reduce the file size and helps to load the page much faster.<br \/>\nTo remove custom font&#8217;s that are not required please go to Enfold > Import\/Export > Custom Font Manager and delete the unused fonts.<br \/>\nPlease do consider checking out this nice article about optimizing the custom fonts on <a href=\"https:\/\/css-tricks.com\/preventing-the-performance-hit-from-custom-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Tricks<\/a>.<\/p>\n<\/div><\/section><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,12],"tags":[],"class_list":["post-8712","post","type-post","status-publish","format-standard","hentry","category-documentation","category-explore","documentation","explore"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=8712"}],"version-history":[{"count":78,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8712\/revisions"}],"predecessor-version":[{"id":12543,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8712\/revisions\/12543"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=8712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=8712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=8712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}