If I could marry a “thing” it would most definitely be a font.  I love fonts because they are so beautiful and sexy. Be still my beating heart. Factoria, you make me weak in the knees. However, any relationship can be complicated, especially when you are embedding them into a WordPress site.  Loading fonts directly using CSS3 @font-face is not always the best solution, but sometimes you just really need those bad boys!

The most direct way of adding custom fonts is by adding them using CSS3 @font-face method. This method allows you to use any font that you like on your website.

The first thing you need to do is download the font that you like in a web format. If you do not have the web format for your font, then you can convert it using the FontSquirrel Webfont generator.

Once you have the webfont files, upload it to your web hosting server with FTP or the File Manager of your cPanel.  Once you have uploaded the font, you need to load it to your theme’s stylesheet using CSS3 @font-face rule like this:

@font-face {
font-family: 'customfont';
src: url('www.yoursite/wp-content/uploads/fonts/customfont.eot');
src: local('☺'),
url('https://www.yoursite/wp-content/uploads/fonts/customfont.woff') format('woff'),
url('https://www.yoursite/wp-content/uploads/fonts/customfont.ttf') format('truetype'),
url('https://www.yoursite/wp-content/uploads/fonts/customfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Don’t forget to replace the font-family and URL with your own.  After that you can use that font anywhere in your theme’s stylesheet.

@font-face {
font-family: 'customfont';
src: url('https://www.yoursite/wp-content/uploads/fonts/customfont.eot');
src: local('☺'),
url('www.yoursite/wp-content/uploads/fonts/customfont.woff') format('woff'),
url('www.yoursite/wp-content/uploads/fonts/customfont.ttf') format('truetype'),
url('www.yoursite/wp-content/uploads/fonts/customfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

h1 {
font-family: 'customfont';
color: #5D5D5F;
font-weight: 300;
font-size: 27px;
text-transform: uppercase;
letter-spacing: 2px;
}

[space shortcode_name=”” height=”space-sm” responsive=”{‹²›desktop_display‹²›:{‹²›selected‹²›:‹²›yes‹²›},‹²›tablet_landscape_display‹²›:{‹²›selected‹²›:‹²›yes‹²›},‹²›tablet_display‹²›:{‹²›selected‹²›:‹²›yes‹²›},‹²›smartphone_display‹²›:{‹²›selected‹²›:‹²›yes‹²›}}” __fw_editor_shortcodes_id=”af050d8578b5439681d14390ec6d2482″ _array_keys=”{‹²›responsive‹²›:‹²›responsive‹²›}” _fw_coder=”aggressive”][/space][button unique_id=”e737742033675be59bd160776aac5358″ style=”{‹²›selected‹²›:‹²›fw-btn-1‹²›,‹²›fw-btn-1‹²›:{‹²›border_radius‹²›:‹²›5‹²›},‹²›fw-btn-2‹²›:{‹²›border_radius‹²›:‹²›0‹²›,‹²›border_size‹²›:‹²›1‹²›},‹²›fw-btn-3‹²›:{‹²›border_size‹²›:‹²›1‹²›}}” normal_color=”{‹²›id‹²›:‹²›color_3‹²›,‹²›color‹²›:‹²›‹²›}” hover_color=”{‹²›id‹²›:‹²›color_2‹²›,‹²›color‹²›:‹²›‹²›}” label_advanced_styling=”{‹²›text‹²›:{‹²›google_font‹²›:true,‹²›subset‹²›:‹²›latin‹²›,‹²›variation‹²›:‹²›700‹²›,‹²›family‹²›:‹²›Roboto Slab‹²›,‹²›style‹²›:false,‹²›weight‹²›:false,‹²›size‹²›:‹²›12‹²›,‹²›line-height‹²›:‹²›30‹²›,‹²›letter-spacing‹²›:‹²›1‹²›,‹²›color-palette‹²›:{‹²›id‹²›:‹²›fw-custom‹²›,‹²›color‹²›:‹²›#ffffff‹²›},‹²›is_saved‹²›:true},‹²›hover_text_color‹²›:{‹²›color‹²›:‹²›#ffffff‹²›,‹²›id‹²›:‹²›fw-custom‹²›}}” label=”BACK TO ALL TIPS AND TRICKS” link=”https://larakroekerinteractive.com/blog/” target=”_self” nofollow=”no” open_in_popup=”{‹²›selected‹²›:‹²›no‹²›}” size=”{‹²›selected‹²›:‹²›fw-btn-md‹²›,‹²›custom‹²›:{‹²›width‹²›:‹²›‹²›,‹²›height‹²›:‹²›‹²›}}” full_width=”{‹²›selected_type‹²›:‹²›fw-btn-full‹²›,‹²›default‹²›:{‹²›btn_alignment‹²›:‹²›text-center‹²›}}” icon_type=”{‹²›tab_icon‹²›:‹²›icon-class‹²›,‹²›icon-class‹²›:{‹²›icon_class‹²›:‹²›‹²›},‹²›upload-icon‹²›:{‹²›upload-custom-img‹²›:‹²›‹²›}}” icon_position=”pull-left-icon” icon_size=”12″ animation_group=”{‹²›selected‹²›:‹²›no‹²›,‹²›yes‹²›:{‹²›animation‹²›:{‹²›animation‹²›:‹²›fadeInUp‹²›,‹²›delay‹²›:‹²›200‹²›}}}” responsive=”{‹²›desktop_display‹²›:{‹²›selected‹²›:‹²›yes‹²›},‹²›tablet_landscape_display‹²›:{‹²›selected‹²›:‹²›yes‹²›},‹²›tablet_display‹²›:{‹²›selected‹²›:‹²›yes‹²›},‹²›smartphone_display‹²›:{‹²›selected‹²›:‹²›yes‹²›}}” class=”” __fw_editor_shortcodes_id=”3ee73deb942b008e871fb4522fca66e9″ _array_keys=”{‹²›style‹²›:‹²›style‹²›,‹²›normal_color‹²›:‹²›normal_color‹²›,‹²›hover_color‹²›:‹²›hover_color‹²›,‹²›label_advanced_styling‹²›:‹²›label_advanced_styling‹²›,‹²›open_in_popup‹²›:‹²›open_in_popup‹²›,‹²›size‹²›:‹²›size‹²›,‹²›full_width‹²›:‹²›full_width‹²›,‹²›icon_type‹²›:‹²›icon_type‹²›,‹²›animation_group‹²›:‹²›animation_group‹²›,‹²›responsive‹²›:‹²›responsive‹²›}” _fw_coder=”aggressive”][/button]