¿Cómo modificar la tipografía del Campus?

El Campus viene con una tipografía por default. En su momento, los administradores podían cambiar este aspecto del Campus mediante el proceso de marca blanca. Ahora, pueden modificarlo las veces que quieran desde la Configuración General. Allí podrán aplicar los cambios pertinentes para alinear el Campus con la identidad de marca de la organización. 

Existen 2 alternativas para cambiar la tipografía del Campus: en la personalización visual del Campus con una cantidad limitada de tipografías y manualmente incrustando código CSS personalizado (tanto tipografías de Google Fonts cómo familias tipográficas alojadas en un dominio propio). 

Desde Configuración General:

El Campus apunta a la autogestión y personalización de la interfaz para que el usuario final pueda modificar de manera inmediata y las veces que necesite. Apuntando hacia ese horizonte, en la Configuración General>Personalización>Personalización visual del Campus>Tipografía.

El video muestra cómo dentro de la personalización visual del Campus se ven todas las familias tipográficas que ofrece el Campus. Sólo una tipografía para todo el sistema, la cual se aplicará tanto en texto como en títulos. Contamos con: Arial, Courier New, Georgia, Lato, Licida Sans, Merriweather, Montserrat, Open Sans, Oswald, Quicksand, Roboto, Source Sans pro, Source serif pro, Tahoma, Times New Roman, Trebuchet y Verdana. 

Mediante CSS personalizado:

En esta nueva sección dentro de la Configuración General, podés agregar código para editar los estilos del Campus. En caso de querer personalizar el Campus con una tipografía que no está incluida en las ofrecidas por Wormhole, podés incrustar el código manualmente.

Usando tipografía de Google Font:

1° paso: ir a Google Font, buscar la tipografía deseada, seleccionar los estilos de dicha tipografía, escoger la opción import y copiarse el código (solo la parte en comillas que corresponde a la url en sí). 

2° paso: ir a la sección JavaScript de la Configuración General y pegar el siguiente pedazo de código:

var baseGoogleApis = document.createElement('link');
baseGoogleApis.rel = "preconnect";
baseGoogleApis.href = "https://fonts.googleapis.com";
var fontsApi = document.createElement('link');
fontsApi.rel = "preconnect";
fontsApi.href = "https://fonts.gstatic.com";
fontsApi.crossorigin = true;
var fontToImport = document.createElement("link");
fontToImport.href = "https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&family=Edu+VIC+WA+NT+Beginner&display=swap";
fontToImport.rel = "stylesheet";
document.body.appendChild(baseGoogleApis);
document.body.appendChild(fontsApi);
document.body.appendChild(fontToImport);

3° paso: cambiar en este código la parte encomillada en la linea de fontToImport.href= por la url que copiamos en el paso 1 y guardamos. 

4° paso: Volver a la página de Google Fonts donde sacamos el código de nuestra tipografía y sacar la siguiente linea para incrustar directamente en el CSS personalizado. 

5° paso: Vamos a la sección de CSS personalizado y metemos la linea de código que sacamos de Google Fonts pero presten atención que agregamos "!important" y dentro de la sección body. Esto sirve para asegurarnos que se apliquen los cambios. 

Esta última captura ya tiene la configuración guardada y por lo tanto ya fue actualizada con la tipografía Nunito. 

Usando tipografía propia:

Si la tipografía no es extraída de Google Fonts, se puede incrustar directamente por CSS y son menos los pasos a seguir. Volvemos a ir a CSS personalizado e ingresamos la siguiente linea de código: 

 @font-face {
    font-family: 'avenirNext-bold';
    font-style: normal;
    font-weight:normal;
    src: url('https://campustest.wormholeit.com/App_Themes//Fonts/AVENIRNEXTLTPRO-BOLD.OTF');
}

Debemos cambiar la url que se encuentra en la lina de src: url( ... ) por la propia ya que está es una inexistente y el font-family (en el caso siguiente sería OpenSans).

Como pueden observar agregamos el código, modificamos la url y por debajo del código incrustado agregamos:

body {font-family:'OpenSans', sans-serif;}

Ya podemos guardar y tenemos el cambio inmediato en el Campus.