{"id":1853,"date":"2018-11-15T17:47:44","date_gmt":"2018-11-16T01:47:44","guid":{"rendered":"https:\/\/dividude.com\/?p=1853"},"modified":"2019-12-19T11:44:41","modified_gmt":"2019-12-19T19:44:41","slug":"adding-fonts-to-divi-just-got-easy","status":"publish","type":"post","link":"https:\/\/dividude.com\/adding-fonts-to-divi-just-got-easy\/","title":{"rendered":"How to Add Fonts in Divi"},"content":{"rendered":"
[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.0.9″ background_enable_color=”off” custom_padding=”||0px|”][et_pb_row padding_mobile=”off” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”6px|0px|18px|0px”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_post_title _builder_version=”4.0.9″][\/et_pb_post_title][et_pb_post_title title=”off” admin_label=”Categories” _builder_version=”4.0.9″ meta_text_align=”center” meta_text_color=”#f0ff23″ meta_font_size=”13px” background_color=”#442b00″ width=”30%” module_alignment=”center” custom_margin=”||17px|||” border_radii=”off|4px||4px|” border_width_all=”1px” border_color_all=”#32952d” box_shadow_style=”preset3″ global_module=”3877″ saved_tabs=”all”][\/et_pb_post_title][et_pb_text admin_label=”Author Divi Dude” _builder_version=”4.0.9″ text_font=”||on||||||” text_font_size=”14px” text_orientation=”center” custom_padding=”||0px|||” global_module=”3944″ saved_tabs=”all”]<\/p>\n
By Divi Dude<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ specialty=”on” background_position_1=”top_left” background_position_2=”top_left” background_repeat_1=”no-repeat” background_repeat_2=”no-repeat” _builder_version=”4.0.9″ custom_padding=”0px|||” hover_enabled=”0″][et_pb_column type=”3_4″ specialty_columns=”3″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_row_inner admin_label=”Row” _builder_version=”3.25″][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”COPY” _builder_version=”3.27.4″ header_2_text_color=”#32952d” header_2_text_shadow_style=”preset2″ header_2_text_shadow_horizontal_length=”0.05em” header_2_text_shadow_vertical_length=”0.05em” header_2_text_shadow_color=”rgba(0,0,0,0.8)” use_border_color=”off”]A<\/span>dding fronts to Divi is really easy with the new drag and drop feature.\u00a0 (please note, this feature became available in version 3.12 or later of Divi).\u00a0 You can also add fonts by choosing Upload when selecting the font from the design tab.\u00a0I did a really short video on the subject which can be found on YouTube<\/a>, or by watching below.\u00a0 I’ll go over the steps in the copy below the video if you’d rather read.<\/p>\n [\/et_pb_text][et_pb_video src=”https:\/\/youtu.be\/arsjnGtP4Rw” play_icon_color=”#e02b20″ module_class=”dropShadowEffect” _builder_version=”3.12.1″ custom_css_main_element=”border: 5px solid #000;”][\/et_pb_video][et_pb_text admin_label=”COPY: Finding Fonts to Use with Divi” _builder_version=”3.27.4″ header_font=”||||||||” header_2_font=”||||||||” header_2_text_color=”#32952d” header_2_text_shadow_style=”preset2″ header_2_text_shadow_horizontal_length=”0.05em” header_2_text_shadow_vertical_length=”0.05em” header_2_text_shadow_color=”rgba(0,0,0,0.8)” use_border_color=”off”]<\/p>\n Before you add any fonts to your website, I guess you should find some fonts you want to use.\u00a0 With Divi from Elegant Themes you can use True Type<\/em> (.ttf), Open Type<\/em> (.otf), or Embedded Open Type<\/em> (.eot), or Web Open Font Format<\/em> (.woff \/ .woff2) fonts.\u00a0 Check with your fonts licenses before uploading to your website to make sure you can upload it legally.<\/p>\n In the video, the example font I use is Boycott<\/a>, which I found on 1001 Free Fonts<\/a> website.\u00a0 It is free to use, so I thought it would be a good font to use as a sample.<\/p>\n [\/et_pb_text][et_pb_text admin_label=”Copy: Adding Fonts Via Upload and Drag & Drop” _builder_version=”3.27.4″ header_2_text_color=”#32952d” header_2_text_shadow_style=”preset2″ header_2_text_shadow_horizontal_length=”0.05em” header_2_text_shadow_vertical_length=”0.05em” header_2_text_shadow_color=”rgba(0,0,0,0.8)” use_border_color=”off”]<\/p>\n One method for adding a new font to your Divi website is via the Design tab found within your module.\u00a0 Just click on the tab, choose any one of the expandable fields that has fonts (i.e. text, heading, body copy) and in the font selection drop down, you’ll see a button that allows you to upload a font. Press the button, then navigate to where the font you want to upload is and upload it.\u00a0 Now, you’ll see the font has been added. Simply choose the font when you want to use it. It’s really easy. But there’s an even easier way…<\/p>\n … and the easier way is to just drag and drop it into the Visual Builder.\u00a0 Open up the Visual Builder and go to your computer and find the font you want to use with File Explorer and select it with your mouse and while holding down the button drag it over the screen with the Visual Builder open and the screen will change color with a message about Dragging and Dropping.\u00a0 (see picture).\u00a0 Now simply let go of the mouse button and Divi will automatically install the font for you. Now when you go to choose a font for header or body copy or where ever you choose fonts, you will find the font you added will be there.\u00a0 Pretty cool and easy, eh?<\/p>\n [\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner _builder_version=”3.25″][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https:\/\/dividude.com\/wp-content\/uploads\/2018\/11\/dragFont_divi.jpg” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”3.23″ animation_style=”flip” border_width_all=”2px” box_shadow_style=”preset2″][\/et_pb_image][\/et_pb_column_inner][\/et_pb_row_inner][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_sidebar orientation=”right” area=”ca-sidebar-4024″ _builder_version=”4.0.9″ header_font_size=”18px” body_line_height=”1.4em” remove_border=”off”][\/et_pb_sidebar][\/et_pb_column][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” disabled_on=”off|off|off” admin_label=”section” module_class=”yellowRadialGradient” _builder_version=”3.22″ custom_padding=”54px|0px|18px|0px” custom_padding_tablet=”50px|0|50px|0″ custom_padding_phone=”” custom_css_main_element=”border-top: 3px solid #fff; margin-top: 0PX;” padding_mobile=”off”][et_pb_row column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”-30px|||” custom_padding=”19px|0px|8px|0px” custom_padding_tablet=”32px|0px|0px|0px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Headline: Featured Divi Dude Tutorials” module_class=”textShadowEffect” _builder_version=”3.27.4″ header_font_size=”54px” header_2_text_color=”#32952d” text_orientation=”center” background_layout=”dark” module_alignment=”center” custom_margin=”|||” custom_padding=”|||” header_font_size_tablet=”46px” header_font_size_phone=”40px” header_2_text_shadow_style=”preset2″ header_2_text_shadow_horizontal_length=”0.05em” header_2_text_shadow_vertical_length=”0.05em” header_2_text_shadow_color=”rgba(0,0,0,0.8)” inline_fonts=”Droid Sans”]<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row module_class=”blogGridHeight ” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”||20px|” custom_padding=”27px|0px|0px|0px”][et_pb_column type=”4_4″ _builder_version=”3.25″ background_position=”top_left” custom_padding=”|||” custom_padding__hover=”|||”][et_pb_blog fullwidth=”off” posts_number=”3″ include_categories=”14,16,17,29,13,15,18″ show_more=”on” show_author=”off” show_date=”off” show_categories=”off” show_pagination=”off” module_class=”greenLink blog_grid_more” _builder_version=”3.12″ header_font=”|on|||” header_line_height=”1.1em” body_font_size=”16px” body_line_height=”1.8em” custom_css_featured_image=”border-top: 1px solid #000;||border-left: 1px solid #000;||border-right: 1px solid #000;||z-index: 0;” custom_css_read_more=”padding-top:15px;||text-align: center;” border_color_all=”#000000″ border_width_all_fullwidth=”1px” border_color_all_fullwidth=”#000000″ use_border_color=”on”][\/et_pb_blog][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” admin_label=”section” _builder_version=”4.0.9″ background_color=”#32952d” custom_padding=”0px|0px|0px|0px” custom_padding_tablet=”0px||0px|” custom_padding_phone=”” transparent_background=”off” padding_mobile=”off” global_module=”4086″][et_pb_row padding_mobile=”off” column_padding_mobile=”on” admin_label=”row” _builder_version=”4.0.9″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin_tablet=”0px||0px|” custom_margin_phone=”0px||0px|” custom_padding=”0px|0px|0px|0px” custom_padding_tablet=”0px||0px|” custom_padding_phone=”0px||0px|”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Affiliate disclaimer – Brown” module_class=”brownLink” _builder_version=”4.0.9″ text_font_size=”12″ text_orientation=”center” background_layout=”dark” module_alignment=”center” text_font_size_tablet=”13px” text_font_size_phone=”10px” text_line_height_tablet=”1.6em” text_line_height_phone=”1.5em” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\nFinding Fonts to Use with Divi<\/h2>\n
Upload Your Font Via Divi’s Design Tab<\/h2>\n
Add Your Font with Divi’s New Drag and Drop Method<\/h2>\n
Latest Divi Dude Tutorials<\/strong><\/span><\/h2>\n