/*
#########################
#                       #
#     ██   ████   ████  #
#   ████  ███ ██ ███ ██ #
# ██  ██  ██ ███ ██ ███ #
# ███████ ██  ██ ██  ██ #
#     ██   ████   ████  #
#                       #
# normal - book         #
#########################
*/

@font-face {
    font-family: 'myfontmono';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/sf-mono-regular.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/sf-mono-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'myfontmono';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/sf-mono-regularitalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/sf-mono-regularitalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}




/*
########################
#                      #
#    ██   ████   ████  #
#   ███  ███ ██ ███ ██ #
#    ██  ██ ███ ██ ███ #
#    ██  ██  ██ ██  ██ #
#   ████  ████   ████  #
#                      #
# thin - hairline      #
########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Ultralight.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Ultralight.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-UltralightItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-UltralightItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

/*
########################
#                      #
#  ████   ████   ████  #
# █   ██ ███ ██ ███ ██ #
#   ██   ██ ███ ██ ███ #
#  ██    ██  ██ ██  ██ #
# ██████  ████   ████  #
#                      #
# extra light (ultra l)#
########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Thin.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Thin.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-ThinItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-ThinItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

/*
########################
#                      #
# ██████  ████   ████  #
#    ██  ███ ██ ███ ██ #
#   ██   ██ ███ ██ ███ #
# █   ██ ██  ██ ██  ██ #
#  ████   ████   ████  #
#                      #
# light                #
########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Light.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-LightItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

/*
#########################
#                       #
#     ██   ████   ████  #
#   ████  ███ ██ ███ ██ #
# ██  ██  ██ ███ ██ ███ #
# ███████ ██  ██ ██  ██ #
#     ██   ████   ████  #
#                       #
# normal - book         #
#########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Regular.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-RegularItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

/*
########################
#                      #
# ██████  ████   ████  #
# ██     ███ ██ ███ ██ #
# █████  ██ ███ ██ ███ #
#     ██ ██  ██ ██  ██ #
#  ████   ████   ████  #
#                      #
# medium               #
########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Medium.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-MediumItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

/*
########################
#                      #
#  ████   ████   ████  #
# ██     ███ ██ ███ ██ #
# █████  ██ ███ ██ ███ #
# ██  ██ ██  ██ ██  ██ #
#  ████   ████   ████  #
#                      #
# semi bold (demi b)   #
########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Semibold.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-SemiboldItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-SemiboldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

/*
########################
#                      #
# ██████  ████   ████  #
# ██  ██ ███ ██ ███ ██ #
#    ██  ██ ███ ██ ███ #
#   ██   ██  ██ ██  ██ #
#   ██    ████   ████  #
#                      #
# bold                 #
########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Bold.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-BoldItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

/*
########################
#                      #
#  ████   ████   ████  #
# ██  ██ ███ ██ ███ ██ #
#  ████  ██ ███ ██ ███ #
# ██  ██ ██  ██ ██  ██ #
#  ████   ████   ████  #
#                      #
# extra bold (ultra b) #
########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Black.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Black.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-BlackItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-BlackItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

/*
########################
#                      #
#  ████   ████   ████  #
# ██  ██ ███ ██ ███ ██ #
#  █████ ██ ███ ██ ███ #
#     ██ ██  ██ ██  ██ #
#  ████   ████   ████  #
#                      #
# black (heavy)        #
########################
*/

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-Heavy.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'myfont';
    src: local('☺︎'),
    url('/_fonts/sanfrancisco/SFProDisplay-HeavyItalic.woff2') format('woff2'),
    url('/_fonts/sanfrancisco/SFProDisplay-HeavyItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}