bigbluebutton / bigbluebutton-font

Custom font used in BigBlueButton
5 stars 17 forks source link

how can i install it? #28

Open rfakit opened 4 years ago

rfakit commented 4 years ago

there is no specific guid through the process of installation

tylercopeland commented 4 years ago

@rfakit, would you be able to provide more details about where you would like to install the bigbluebutton-font? Today, it's part of the main BigBlueButton codebase, and there is no need to install it again if you are currently developing BigBlueButton.

mk-pmb commented 3 years ago

I was looking for a way to make the icons display correctly on Windows in a Firefox where font downloading is disabled for security reasons. My steps to success were:

  1. Download the TTF files from the URLs in the CSS snippet below.
  2. Install them locally. (Control Panel -> Fonts; then drag-and-drop the font files from the download folder into the fonts folder.)
  3. Ensure you have a mechanism to override websites' CSS rules, e.g. the Stylus addon.
  4. Override the font names similar to the CSS below.

For the Stylus addon, one way to override font names is:

  1. Host a version of the CSS file below on a webserver you trust, with the domain names changed to where your BBB is hosted.
  2. Visit the URL of the hosted CSS file with your Firefox.
  3. Stylus asks whether to install the UserStyle; select yes.
/* ==UserStyle==
@name         BigBlueButton: Fix locally-installed fonts
@namespace    userstyles.web-enhance.pimpmybyte.de
@version      0.1.0
@license      ISC
@homepageURL  http://localhost/util/userstyles/bigbluebutton.user.css
@author       mk-pmb
==/UserStyle== */

/* Font downloads:
    https://github.com/bigbluebutton/bigbluebutton/blob/develop/bigbluebutton-config/web/fonts/fontawesome-webfont.ttf
    https://github.com/bigbluebutton/bigbluebutton-font/blob/master/export/fonts/bbb-icons.ttf
*/

@-moz-document domain("bbb.example.org"), domain("bbbackend23.example.net") {

body .fa, body .fas { font-family: "FontAwesome"; }
body [class*=" icon-bbb-"], body [class^="icon-bbb-"] { font-family: "BigBlueButton" !important; }

}