{"id":2445,"date":"2024-08-12T03:08:41","date_gmt":"2024-08-12T07:08:41","guid":{"rendered":"https:\/\/sites.bu.edu\/marcom-team\/?page_id=2445"},"modified":"2025-12-12T12:51:10","modified_gmt":"2025-12-12T17:51:10","slug":"webfonts-fonts-icons","status":"publish","type":"page","link":"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/webfonts-fonts-icons\/","title":{"rendered":"Webfonts, Fonts &#038; Icons"},"content":{"rendered":"<div class=\" bu-callout alignright\"><\/p>\n<h4>Webfont Hosting<\/h4>\n<p>Please ensure that any webfonts used are downloaded, applied, and linked to our CDN. <a href=\"https:\/\/github.com\/bu-ist\/cdn\">Check out the repository&#8217;s readme.md<\/a> for how to do so.<\/p>\n<p><strong>This ensures that if webfont servers go down, our webfonts will still display correctly.<\/strong><\/p>\n<p><\/div>\n<h2>Fonts<\/h2>\n<p><span style=\"font-weight: 400;\">Traditional font files are available through our server; webfonts are available through <a href=\"https:\/\/www.bu.edu\/cdn\/fonts\/\">our CDN<\/a>.<\/span><\/p>\n<p><a href=\"https:\/\/www.bu.edu\/cdn\/fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\">BU CDN<\/a><\/p>\n<p>&nbsp;<\/p>\n<h4>Webfonts<\/h4>\n<p><span style=\"font-weight: 400;\">Find our privately hosted webfonts on <\/span><a href=\"http:\/\/www.bu.edu\/cdn\/fonts\/\"><span style=\"font-weight: 400;\">our CDN<\/span><\/a>.<\/p>\n<p>Webfonts are also available from <a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>.<\/p>\n<h4>Traditional Fonts<\/h4>\n<p><span style=\"font-weight: 400;\">Need a font for designing and mocking up?<br \/>\nOur fonts server locations are:<\/span><\/p>\n<p><a href=\"smb:\/\/nas1.bu.edu\/mc\/GROUPS\/Projects\/_Fonts\"><span style=\"font-weight: 400;\">smb:\/\/nas1.bu.edu\/mc\/GROUPS\/Projects\/_Fonts<\/span><\/a><\/p>\n<p><a href=\"smb:\/\/nas1.bu.edu\/mc\/GROUPS\/CRS\/New Media\/_Fonts and Icons\"><span style=\"font-weight: 400;\">smb:\/\/nas1.bu.edu\/mc\/GROUPS\/CRS\/New Media\/_Fonts and Icons<\/span><\/a><\/p>\n<h4>Purchasing Fonts<\/h4>\n<p><span style=\"font-weight: 400;\">New font purchases need to be coordinated with Creative Director Jon Brousseau to buy licenses.<\/span><\/p>\n<p><strong>Type Foundries<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.typography.com\/\"><span style=\"font-weight: 400;\">Hoefler &amp; Co.<\/span><\/a><\/li>\n<\/ul>\n<hr \/>\n<h2>Icons<\/h2>\n<p>SVG Sprites are <a href=\"https:\/\/webfontapp.com\/svg-sprite-vs-icon-font\">quickly becoming a more accessible alternative<\/a>, but we still find much use\u2014particularly styling\u2014for icon-based webfonts.<\/p>\n<p>Case in point: <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Awesome<\/a>. We currently have the <code>\"Font Awesome 5 Free\"<\/code> icon font-family applied to be the default for Responsive Child Starter 3x.<\/p>\n<p>Our retired icon webfont is <code>\"bu-default-icons\"<\/code>: Although it loads properly on any <a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/what-we-do\/our-setup\/webdev\/\">Static<\/a> or <a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/what-we-do\/our-setup\/prod\/\">Production server<\/a> site, for sites on the <a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/what-we-do\/our-setup\/sandboxes\/\">Development [sandboxes] server<\/a>, you may need to <code>@import<\/code> the font from the CDN into your theme&#8217;s files to test the <a href=\"https:\/\/www.bu.edu\/cdn\/fonts\/icons\/bu-default-icons\/specimen-icons.html#icon-buhub\">BU Hub icon<\/a>\u00a0(see bottom of page).<\/p>\n<p><a href=\"https:\/\/www.bu.edu\/cdn\/fonts\/icons\/bu-default-icons\/specimen-icons.html\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\">BU Default Icons<\/a><\/p>\n<p><a href=\"https:\/\/fontawesome.com\/v5\/search?o=r&amp;m=free\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\">Font Awesome 5.15.4 (Free)<\/a><\/p>\n<p><a href=\"https:\/\/fontawesome.com\/v5\/search?o=r&amp;f=brands\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\">Font Awesome 5.15.4 (Brands)<\/a><\/p>\n<p>&nbsp;<\/p>\n<div class=\" bu-callout aligncenter\"><\/p>\n<h4>Updating Icons<\/h4>\n<h2>Twitter to X<\/h2>\n<p>As Twitter was rebranded to X, we updated our BU-Default-Icons font-family.<\/p>\n<p>Please utilize <a href=\"https:\/\/github.com\/bu-ist\/r3-wheelock\/pull\/381\/files#diff-bca59945cd5156ec79d0af47af8dbd890413d1938c74c42974bad3215189c948R1009-R1016\" target=\"_blank\" rel=\"noopener noreferrer\">the following snippet of code<\/a> to ensure any instances of Twitter and X render the appropriate icon.<\/p>\n<p>&nbsp;<\/p>\n<p><code><br \/>\n\/\/ Updating Twitter icon to X<br \/>\n.menu-item [href*=\"twitter.com\"]::before,<br \/>\n.menu-item [href*=\"x.com\"]::before {<br \/>\ncontent: \"\\F611\";<br \/>\nfont-family: \"BU-Default-Icons\";<br \/>\nfont-weight: normal;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>&nbsp;<\/p>\n<p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Fonts Traditional font files are available through our server; webfonts are available through our CDN. BU CDN &nbsp; Webfonts Find our privately hosted webfonts on our CDN. Webfonts are also available from Google Fonts. Traditional Fonts Need a font for designing and mocking up? Our fonts server locations are: smb:\/\/nas1.bu.edu\/mc\/GROUPS\/Projects\/_Fonts smb:\/\/nas1.bu.edu\/mc\/GROUPS\/CRS\/New Media\/_Fonts and Icons Purchasing [&hellip;]<\/p>\n","protected":false},"author":12906,"featured_media":0,"parent":228,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2445"}],"collection":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/users\/12906"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/comments?post=2445"}],"version-history":[{"count":25,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2445\/revisions"}],"predecessor-version":[{"id":4193,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2445\/revisions\/4193"}],"up":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/228"}],"wp:attachment":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/media?parent=2445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}