Controls which missing typefaces, bold or italic, may be synthesized by the browser.

font-synthesis: none | weight | style | weight style

Gives you control: Chinese, Japanese, Korean and logographic scripts tend not to include bold or italic variants, and synthesizing them may impede the legibility

• none: neither bold nor italic typeface may be synthesized.
• weight: synthesize bold typeface
• style: synthesize italic typeface
• weight style: synthesize both

Enables using custom fonts on the web.

The feature that enables us to not be reliant only on "web-safe" fonts

Caveats

• CORS: font files must be on the same domain as the page using them
• Lots of fonts can lead to slow load (limit # of fonts)
• Lots of characters can lead to large font files (limit character set)
• Slow load can lead to FOUT (swap)
• Don't use if you don't need to! (use system fonts)

Specifies a font which can then be used as a font-family value

@font-face {
   font-family: <family-name>; 
src: <src>; 
   unicode-range: <unicode-range>; 
   font-variant: <font-variant>; 
   font-feature-settings: <font-feature-settings>; 
   font-variation-settings: <font-variation-settings>;
   font-stretch: <font-stretch>; 
   font-weight: <font-weight>; 
   font-style: <font-style>; 
}

A value for each font descriptor is set, whether explicitly or to the default value.

Start with:

@font-face {
   font-family: 'Name of your font'; 
   src: ;
}

Values for CSS descriptors are same as that of its corresponding font property.

font-family and src descriptors are required.

Required value. Specifies the name you will be referencing when you include the font in a font list.

@font-face {
  font-family: My Font Name;
  src: local('font name on my system') url('path/fontFileName.ttf');
}

Doesn't need to be quoted unless there's punctuation or a word starts with a number. Though, quoting makes it easier to read.

@font-face {
  font-family: "Cool Font";
  src: local('Times New Roman') url('path/unrelatedName.ttf');
}

The name you give isn't restricted by other values, including names of existing fonts.

Don't use system ui names (see font shorthand)

@font-face {
  font-family: "Times New Roman";
  src: url('path/unrelatedName.ttf');
}

Will use the unrelatedName.ttf instead of the system's Times New Roman.

Font family names are case insensitive.

Specifies the resource containing font data

src: local(Acme Font),
     url(path/to/acme.woff),
     url(path/to/acme.otf), 
     url(path/to/acme.svg);

Use both local() and url()

If the user has the font installed, use that and save time/bytes. If not, download the font file.

• comma-separated list of font files or locally-installed font face names
• Using the first it can successfully activate

Optional hint describing the format of the font resource

src: local(Acme Font),
     url(path/to/acme.woff) format("woff"),
     url(path/to/acme.otf) format("opentype"), 
     url(path/to/acme.svg) format("svg");

Comma-separated list of format strings of well-known font formats.

• Browsers skip resource if the format is unsupported or unknown
• If there's no hint, browser downloads then tests (bad performance).

To use a locally available copies of a given font and download it if it's not, or to rename a OS font, or to overwrite the name of a 3rd party font

@font-face {
  font-family: "Estelle's Fantastic Font";
  src: local(Estelle Bold),                          /* full font name */
       local(Estelle-Bold),                          /* Postscript name */
       url(path/EstelleBoldFnt.woff) format("woff"), /* Download if user */
       url(path/EstelleBoldFnt.otf)  format("otf");  /* doesn't have it. */
  font-weight: bold;
}

specifies a single font, not an entire font family

Allows authors to specify the font styles, weights, and stretch for the font specified in the @font-face rule.

@font-face {
  font-family: groovyFont;
  src: url('groovy-oblique.ttf');
  font-style: oblique -30deg 30deg;
  font-weight: 300 500;
  font-stretch: 75% 150%;
}

For every font family, different files can be downloaded for each style, weight, or stretch. The descriptors explicitly specify when this file should be used.

auto | normal | italic | oblique [ <angle> | <angle> <angle> ] ?

Use "slnt" variation for oblique OR ital=1 for italic. Not both.

normal

Used for normal version of the font-family. font-style: normal;

italic

Use for italic version of the normal font. font-style: italic;

oblique

Sloped version of the normal font. font-style: oblique;

oblique with angle

Font is set to oblique with a specifie slange angle font-style: oblique -10deg;

oblique <angle> range

Selects a font classified as oblique while specifying a range of allowable angles of text slant. font-style: oblique -30deg 30deg;

Range is only supported when the font-style is oblique; for font-style: normal or italic, no second value is allowed.

auto |normal | bold | <number>{1,2}

There are generally limited weights available for a font family. When specified weight doesn't exist, a nearby weight is used.

Fonts lacking bold are often synthesized by browser. To prevent this, use font-synthesis property.

Use "wght" variation for font-weights

Class is fwd

For variable fonts, the "wdth" variation is used to implement varying widths.

Sets the specific range of characters to be used from a font defined by @font-face. Defaults to all characters available.

unicode-range: U+0025-00FF, U+4??;

single codepoint

A single Unicode character unicode-range: U+26

codepoint range

A range of Unicode characters. unicode-range: U+0025-00FF;.

wildcard range

A range of Unicode code points denoted with ?. unicode-range: U+4?? => U+400 to U+4FF.

If the page doesn't use any character in the range, the font is not downloaded

If a single character on a page requires a font, the whole font is downloaded.

@font-face {
    font-family: 'myFont';
    src: url('myfont-webfont.woff2') format('woff2'),
         url('myfont-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+26;
}

Controls advanced typographic features in OpenType fonts.

Use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

• Must be 4 characters.
• <string>, not an <ident>

1. Loading: Font files can have huge files sizes. Redue the number of fonts and the charset for each
2. Legal ownership: Putting a font on the web makes it available for people to download freely. You need the right type of ownership to do this legally
3. Performance: Due to the size, they can take a long time to load. FOUT and FOIC
   • Flash of Unstyled Text: display fallback until custom font loads
   • Flash of Invisible Text: Hides the text until custom font loaded
4. Don't forget font-synthesis: none;

1. ‘font-stretch’ is tried first. If the matching set contains faces with width values matching the ‘font-stretch’ value, faces with other width values are removed from the matching set. If there is no face that exactly matches the width value the nearest width is used instead. If the value of ‘font-stretch’ is ‘normal’ or one of the condensed values, narrower width values are checked first, then wider values. If the value of ‘font-stretch’ is one of the expanded values, wider values are checked first, followed by narrower values. Once the closest matching width has been determined by this process, faces with other widths are removed from the matching set.
2. ‘font-style’ is tried next. If the value of ‘font-style’ is ‘italic’, italic faces are checked first, then oblique, then normal faces. If the value is ‘oblique’, oblique faces are checked first, then italic faces and then normal faces. If the value is ‘normal’, normal faces are checked first, then oblique faces, then italic faces. Faces with other style values are excluded from the matching set. User agents are permitted to distinguish between italic and oblique faces within platform font families but this is not required, so all italic or oblique faces may be treated as italic faces. However, within font families defined via @font-face rules, italic and oblique faces must be distinguished using the value of the ‘font-style’ descriptor. For families that lack any italic or oblique faces, user agents may create artificial oblique faces, if this is permitted by the value of the ‘font-synthesis’ property.
3. ‘font-weight’ is matched next, so it will always reduce the matching set to a single font face. If bolder/lighter relative weights are used, the effective weight is calculated based on the inherited weight value, as described in the definition of the ‘font-weight’ property. Given the desired weight and the weights of faces in the matching set after the steps above, if the desired weight is available that face matches. Otherwise, a weight is chosen using the rules below:
   1. If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
   2. If the desired weight is greater than 500, weights above the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
   3. If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used. If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.
4. ‘font-size’ must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded to the nearest whole pixel, while the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g., by ‘em’ values in other properties, are based on the ‘font-size’ value that is used, not the one that is specified.

The developer tools for fonts are AWESOME!

• See the applied font (used for rendering) in rules view (it's underlined)
• Discover the Fonts Panel
• See a list of all used fonts used in a document
• on hover of the font family, highlight where the font is used to render content (this is great for showing subsets) editor area, works for both non-varialbe and variable fonts (will show all custom axis) editor can convert units if you switch them at the bottom, list of all fonts used on page incl. hover functionality mentioned above

how a font face is displayed based on whether and when it is downloaded and ready to use

font-display: auto | block | swap | fallback | optional

auto

The font display strategy is defined by the user agent.

block

Gives the font face a short block period and an infinite swap period.

swap

Gives the font face an extremely small block period and an infinite swap period.

fallback

Gives the font face an extremely small block period and a short swap period.

optional

Gives the font face an extremely small block period and no swap period.

The font display timeline

The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.

Font block period

If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.

Font swap period

If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.

Font failure period

If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.

If you know the font is going to take a while to load or has a very different look than the fallback

@font-face {
  font-family: MyLargeFont;
  src: url(/path/to/fonts/hugeFontFile.woff) format('woff');
  font-display: fallback;
}

If you know the fallback isn't too shockingly different from the custom font.

@font-face {
  font-family: MyRequiredFont;
  src: url(/path/to/fonts/hugeFontFile.woff) format('woff');
  font-display: swap;
}

Use SVG

with CurrentColor

3d_rotation ac_unit access_alarm access_alarms access_time accessibility accessible account_balance account_balance_wallet account_box account_circle adb add add_a_photo add_alarm add_alert add_box add_circle add_circle_outline add_location add_shopping_cart add_to_photos add_to_queue adjust airline_seat_flat airline_seat_flat_angled airline_seat_individual_suite airline_seat_legroom_extra airline_seat_legroom_normal airline_seat_legroom_reduced airline_seat_recline_extra airline_seat_recline_normal airplanemode_active airplanemode_inactive airplay airport_shuttle alarm alarm_add alarm_off alarm_on album all_inclusive all_out android announcement apps archive arrow_back arrow_downward arrow_drop_down arrow_drop_down_circle arrow_drop_up arrow_forward arrow_upward art_track aspect_ratio assessment assignment assignment_ind assignment_late assignment_return assignment_returned assignment_turned_in assistant assistant_photo attach_file attach_money attachment audiotrack autorenew av_timer backspace backup battery_alert battery_charging_full battery_full battery_std battery_unknown beach_access beenhere block bluetooth bluetooth_audio bluetooth_connected bluetooth_disabled bluetooth_searching blur_circular blur_linear blur_off blur_on book bookmark bookmark_border border_all border_bottom border_clear border_color border_horizontal border_inner border_left border_outer border_right border_style border_top border_vertical branding_watermark brightness_1 brightness_2 brightness_3 brightness_4 brightness_5 brightness_6 brightness_7 brightness_auto brightness_high brightness_low brightness_medium broken_image brush bubble_chart bug_report build burst_mode business business_center cached cake call call_end call_made call_merge call_missed call_missed_outgoing call_received call_split call_to_action camera camera_alt camera_enhance camera_front camera_rear camera_roll cancel card_giftcard card_membership card_travel casino cast cast_connected center_focus_strong center_focus_weak change_history chat chat_bubble chat_bubble_outline check check_box check_box_outline_blank check_circle chevron_left chevron_right child_care child_friendly chrome_reader_mode class clear clear_all close closed_caption cloud cloud_circle cloud_done cloud_download cloud_off cloud_queue cloud_upload code collections collections_bookmark color_lens colorize comment compare compare_arrows computer confirmation_number contact_mail contact_phone contacts content_copy content_cut content_paste control_point control_point_duplicate copyright create create_new_folder credit_card crop crop_16_9 crop_3_2 crop_5_4 crop_7_5 crop_din crop_free crop_landscape crop_original crop_portrait crop_rotate crop_square dashboard data_usage date_range dehaze delete delete_forever delete_sweep description desktop_mac desktop_windows details developer_board developer_mode device_hub devices devices_other dialer_sip dialpad directions directions_bike directions_boat directions_bus directions_car directions_railway directions_run directions_subway directions_transit directions_walk disc_full dns do_not_disturb do_not_disturb_alt do_not_disturb_off do_not_disturb_on dock domain done done_all donut_large donut_small drafts drag_handle drive_eta dvr edit edit_location eject email enhanced_encryption equalizer error error_outline euro_symbol ev_station event event_available event_busy event_note event_seat exit_to_app expand_less expand_more explicit explore exposure exposure_neg_1 exposure_neg_2 exposure_plus_1 exposure_plus_2 exposure_zero extension face fast_forward fast_rewind favorite favorite_border featured_play_list featured_video feedback fiber_dvr fiber_manual_record fiber_new fiber_pin fiber_smart_record file_download file_upload filter filter_1 filter_2 filter_3 filter_4 filter_5 filter_6 filter_7 filter_8 filter_9 filter_9_plus filter_b_and_w filter_center_focus filter_drama filter_frames filter_hdr filter_list filter_none filter_tilt_shift filter_vintage find_in_page find_replace fingerprint first_page fitness_center flag flare flash_auto flash_off flash_on flight flight_land flight_takeoff flip flip_to_back flip_to_front folder folder_open folder_shared folder_special font_download format_align_center format_align_justify format_align_left format_align_right format_bold format_clear format_color_fill format_color_reset format_color_text format_indent_decrease format_indent_increase format_italic format_line_spacing format_list_bulleted format_list_numbered format_paint format_quote format_shapes format_size format_strikethrough format_textdirection_l_to_r format_textdirection_r_to_l format_underlined forum forward forward_10 forward_30 forward_5 free_breakfast fullscreen fullscreen_exit functions g_translate gamepad games gavel gesture get_app gif golf_course gps_fixed gps_not_fixed gps_off grade gradient grain graphic_eq grid_off grid_on group group_add group_work hd hdr_off hdr_on hdr_strong hdr_weak headset headset_mic healing hearing help help_outline high_quality highlight highlight_off history home hot_tub hotel hourglass_empty hourglass_full http https image image_aspect_ratio import_contacts import_export important_devices inbox indeterminate_check_box info info_outline input insert_chart insert_comment insert_drive_file insert_emoticon insert_invitation insert_link insert_photo invert_colors invert_colors_off iso keyboard keyboard_arrow_down keyboard_arrow_left keyboard_arrow_right keyboard_arrow_up keyboard_backspace keyboard_capslock keyboard_hide keyboard_return keyboard_tab keyboard_voice kitchen label label_outline landscape language laptop laptop_chromebook laptop_mac laptop_windows last_page launch layers layers_clear leak_add leak_remove lens library_add library_books library_music lightbulb_outline line_style line_weight linear_scale link linked_camera list live_help live_tv local_activity local_airport local_atm local_bar local_cafe local_car_wash local_convenience_store local_dining local_drink local_florist local_gas_station local_grocery_store local_hospital local_hotel local_laundry_service local_library local_mall local_movies local_offer local_parking local_pharmacy local_phone local_pizza local_play local_post_office local_printshop local_see local_shipping local_taxi location_city location_disabled location_off location_on location_searching lock lock_open lock_outline looks looks_3 looks_4 looks_5 looks_6 looks_one looks_two loop loupe low_priority loyalty mail mail_outline map markunread markunread_mailbox memory menu merge_type message mic mic_none mic_off mms mode_comment mode_edit monetization_on money_off monochrome_photos mood mood_bad more more_horiz more_vert motorcycle mouse move_to_inbox movie movie_creation movie_filter multiline_chart music_note music_video my_location nature nature_people navigate_before navigate_next navigation near_me network_cell network_check network_locked network_wifi new_releases next_week nfc no_encryption no_sim not_interested note note_add notifications notifications_active notifications_none notifications_off notifications_paused offline_pin ondemand_video opacity open_in_browser open_in_new open_with pages pageview palette pan_tool panorama panorama_fish_eye panorama_horizontal panorama_vertical panorama_wide_angle party_mode pause pause_circle_filled pause_circle_outline payment people people_outline perm_camera_mic perm_contact_calendar perm_data_setting perm_device_information perm_identity perm_media perm_phone_msg perm_scan_wifi person person_add person_outline person_pin person_pin_circle personal_video pets phone phone_android phone_bluetooth_speaker phone_forwarded phone_in_talk phone_iphone phone_locked phone_missed phone_paused phonelink phonelink_erase phonelink_lock phonelink_off phonelink_ring phonelink_setup photo photo_album photo_camera photo_filter photo_library photo_size_select_actual photo_size_select_large photo_size_select_small picture_as_pdf picture_in_picture picture_in_picture_alt pie_chart pie_chart_outlined pin_drop place play_arrow play_circle_filled play_circle_outline play_for_work playlist_add playlist_add_check playlist_play plus_one poll polymer pool portable_wifi_off portrait power power_input power_settings_new pregnant_woman present_to_all print priority_high public publish query_builder question_answer queue queue_music queue_play_next radio radio_button_checked radio_button_unchecked rate_review receipt recent_actors record_voice_over redeem redo refresh remove remove_circle remove_circle_outline remove_from_queue remove_red_eye remove_shopping_cart reorder repeat repeat_one replay replay_10 replay_30 replay_5 reply reply_all report report_problem restaurant restaurant_menu restore restore_page ring_volume room room_service rotate_90_degrees_ccw rotate_left rotate_right rounded_corner router rowing rss_feed rv_hookup satellite save scanner schedule school screen_lock_landscape screen_lock_portrait screen_lock_rotation screen_rotation screen_share sd_card sd_storage search security select_all send sentiment_dissatisfied sentiment_neutral sentiment_satisfied sentiment_very_dissatisfied sentiment_very_satisfied settings settings_applications settings_backup_restore settings_bluetooth settings_brightness settings_cell settings_ethernet settings_input_antenna settings_input_component settings_input_composite settings_input_hdmi settings_input_svideo settings_overscan settings_phone settings_power settings_remote settings_system_daydream settings_voice share shop shop_two shopping_basket shopping_cart short_text show_chart shuffle signal_cellular_4_bar signal_cellular_connected_no_internet_4_bar signal_cellular_no_sim signal_cellular_null signal_cellular_off signal_wifi_4_bar signal_wifi_4_bar_lock signal_wifi_off sim_card sim_card_alert skip_next skip_previous slideshow slow_motion_video smartphone smoke_free smoking_rooms sms sms_failed snooze sort sort_by_alpha spa space_bar speaker speaker_group speaker_notes speaker_notes_off speaker_phone spellcheck star star_border star_half stars stay_current_landscape stay_current_portrait stay_primary_landscape stay_primary_portrait stop stop_screen_share storage store store_mall_directory straighten streetview strikethrough_s style subdirectory_arrow_left subdirectory_arrow_right subject subscriptions subtitles subway supervisor_account surround_sound swap_calls swap_horiz swap_vert swap_vertical_circle switch_camera switch_video sync sync_disabled sync_problem system_update system_update_alt tab tab_unselected tablet tablet_android tablet_mac tag_faces tap_and_play terrain text_fields text_format textsms texture theaters thumb_down thumb_up thumbs_up_down time_to_leave timelapse timeline timer timer_10 timer_3 timer_off title toc today toll tonality touch_app toys track_changes traffic train tram transfer_within_a_station transform translate trending_down trending_flat trending_up tune turned_in turned_in_not tv unarchive undo unfold_less unfold_more update usb verified_user vertical_align_bottom vertical_align_center vertical_align_top vibration video_call video_label video_library videocam videocam_off videogame_asset view_agenda view_array view_carousel view_column view_comfy view_compact view_day view_headline view_list view_module view_quilt view_stream view_week vignette visibility visibility_off voice_chat voicemail volume_down volume_mute volume_off volume_up vpn_key vpn_lock wallpaper warning watch watch_later wb_auto wb_cloudy wb_incandescent wb_iridescent wb_sunny wc web web_asset weekend whatshot widgets wifi wifi_lock wifi_tethering work wrap_text youtube_searched_for zoom_in zoom_out zoom_out_map

Fonts that have many different variations - bold, italic, oblique, condensed, expanded, glyphs - of a typeface in a single file, rather than having a separate font file for every width, weight, or style.

• Only one HTTP requests
• Larger than a single font, but smaller than 2 versions (bold & regular)
• (Almost) Infinite options

Specify 4-letter axis names and values of the characteristics you want to vary

Font weight is set with font-variation-settings value.

Comparison paragraph of text

This paragraph will change based on the font-variant value.

Comparison paragraph of text

font-kerning property

font-kerning: auto | normal | none;

font-variant-ligatures property

normal | none | (no-)contextual | (no-)common-ligatures | 
 (no-)discretionary-ligatures | (no-)historical-ligatures;

font-variant-caps property

normal | small-caps | all-small-caps | petite-caps |
all-petite-caps | unicase | titling-caps

font-variant-numeric property: either normal or one or more of the other space-separated values

normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions

font-variant-alternatives property

font-variant-emoji property

• CSS Fonts Module Level 4
• CSS Fonts Module Level 3
• CSS Level 2 (Revision 1)
• CSS Level 1