Web Talk

July 30, 2014
By Guillaume Bourdages

What are Web Fonts?

Table of Contents

Share

[et_pb_section fb_built=”1″ fullwidth=”on” custom_padding_last_edited=”off|desktop” module_class=”single-post-hero” _builder_version=”3.0.106″ custom_padding=”|||”][et_pb_fullwidth_post_title meta=”off” featured_placement=”background” text_color=”light” _builder_version=”3.0.106″ title_font=”|700|||||||” title_font_size=”50px” title_font_size_tablet=”40px” title_font_size_phone=”30px” title_font_size_last_edited=”on|phone” title_line_height=”1.1em” meta_text_color=”#ffbf41″ use_background_color_gradient=”on” background_color_gradient_start=”rgba(0,0,0,0.5)” background_color_gradient_end=”rgba(0,0,0,0.5)” background_color_gradient_overlays_image=”on” text_orientation=”center” custom_padding=”40px|||” custom_css_main_element=”height: 70vh;”][/et_pb_fullwidth_post_title][/et_pb_section][et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.0.106″ custom_padding=”50px||0|”][et_pb_row custom_padding=”0|0px|0|0px” module_class_2=”content-section” module_class_3=”share-section” custom_css_main_3=”top: 10px;||position: sticky;” admin_label=”row” _builder_version=”3.0.106″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”1_4″ _builder_version=”3.0.47″][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.0.47″][et_pb_post_title featured_image=”off” _builder_version=”3.0.106″ title_font=”|700|||||||” title_line_height=”1.2em” border_width_bottom=”1px” border_color_bottom=”#f3f3f3″ custom_margin=”0px||30px|” custom_padding=”|||”][/et_pb_post_title][et_pb_text _builder_version=”3.0.106″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone”]Back in the days, well not that long, like maybe 3 or 4 years ago, it was kind of tricky to use different fonts for web design purposes. From the real basic we were limited to a few choices like: Arial, Time New Roman, Georgia, Lucida, etc.. So yeah, basically the default font present on users computers. We used these few fonts to make sure the website will look the way we wanted with the chosen font on many machines as possible.

There was the possibility to use different tools like one call cufon, where the font we drawn on the screen using javascript or there was technique with flash as well. These techniques we really awesome because it allows you to integrates new cool font in your website and with the certitude that a majority of users will see the website as it was intended. However the issue with these techniques were the following: font was displaying as images, not seo friendly, requires flash, could not copy text, etc…

But you know what, this is the past. We are in 2014, as we wrote this post, and the future of fonts on the web is just starting. Very simply, web fonts are fonts which are installed on the web server or on a another remote server. The browser receive the @font-face command in css, thus download the font locally to use them in the display of the webpage.

Yes, this is brilliant. Now you can use any fonts on your website (obviously you need to have the proper license). Google is now offering more than 600 fonts which are free to use on your commercial websites or non commercial.

On all our projects now, we are offering our customer the ability to set any font they want using the web font technique. There are thousands of resources out there to get fonts for you next web project. You can either pay for it like on MyFonts site or find a free solution as on FontSquirrel. Be careful though, always make sure you have the right licenses to use the font you have chosen.

Let us know if you have questions about web fonts.
[/et_pb_text][/et_pb_column][et_pb_column type=”1_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.0.106″ text_font=”||||||||” text_text_color=”#555555″ custom_margin=”||20px|”]

SHARE:

[/et_pb_text][et_pb_social_media_follow _builder_version=”3.0.106″ custom_margin=”|||” custom_padding=”|||” custom_css_main_element=”||display: flex;||flex-direction: column;” custom_css_social_icon=”border-radius: 50px;”][et_pb_social_media_follow_network social_network=”facebook” url=”https://www.facebook.com/graphem.solutions/” _builder_version=”3.0.106″ background_color=”#3b5998″ follow_button=”off” url_new_window=”on”]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” url=”https://www.linkedin.com/company/18363316/” _builder_version=”3.0.106″ background_color=”#007bb6″ follow_button=”off” url_new_window=”on”]linkedin[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” _builder_version=”3.0.106″ background_color=”#ea2c59″ follow_button=”off” url_new_window=”on”]instagram[/et_pb_social_media_follow_network][/et_pb_social_media_follow][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.0.106″ custom_padding=”0|0px|20px|0px”][et_pb_row module_class_2=”next-prev-section” _builder_version=”3.0.106″ border_color_top=”rgba(0,0,0,0.3)”][et_pb_column type=”1_4″ _builder_version=”3.0.47″][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.0.47″][et_pb_divider color=”rgba(0,0,0,0.3)” _builder_version=”3.0.106″ custom_margin=”||0px|” custom_padding=”||0px|”][/et_pb_divider][et_pb_post_nav prev_text=”%title” next_text=”%title” _builder_version=”3.0.106″ title_font=”|700|||||||” title_text_color=”#0C71C3″ title_font_size=”18px”][/et_pb_post_nav][/et_pb_column][et_pb_column type=”1_4″ _builder_version=”3.0.47″][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.19.13″ background_color=”#fafafa” custom_padding=”25px|0px|0|0px” disabled_on=”on|on|on” disabled=”on”][et_pb_row custom_padding=”27px|0px|0|0px” module_class_2=”comment-section” _builder_version=”3.0.106″][et_pb_column type=”1_4″ _builder_version=”3.0.47″][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.0.47″][et_pb_comments form_background_color=”#ffffff” _builder_version=”3.16″ body_font=”||||||||” form_field_font=”||||||||” custom_button=”on” button_text_size=”15px” button_text_color=”#888888″ button_bg_color=”#ffbf41″ button_border_color=”#ffbf41″ button_border_radius=”83px” button_font=”||||||||” button_use_icon=”off” custom_css_main_header=”font-size: 16px;||font-weight: 700;||border-bottom: 1px solid #e7e7e7;||margin-bottom: 20px;” custom_css_comment_body=”padding-bottom: 0;||border-bottom: 1px solid #e7e7e7;” custom_css_reply_button=”border: none;||border-radius: 0 !important;||padding: 2px 0 2px 10px !important;||font-weight: 400 !important;||background: #fafafa !important;” custom_css_submit_button=”padding: 5px 30px !important;||color: black !important;” button_text_color_hover=”#000000″ button_border_color_hover=”#e8ab3a” button_bg_color_hover=”#e8ab3a” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#000000″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”on” button_border_color__hover=”#e8ab3a” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#e8ab3a” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_comments][/et_pb_column][et_pb_column type=”1_4″ _builder_version=”3.0.47″][/et_pb_column][/et_pb_row][/et_pb_section]

Related Articles