soporte Contactar con Soporte | Estadoestado del sistema del sistema
Contenido de la página

    Uso de fuentes personalizadas en una experiencia de portal

    En este tema aprenderá a utilizar fuentes personalizadas en una experiencia de portal.

    El Editor de sitios de Galería permite personalizar el estilo de una experiencia de portal cambiando el tema, los colores y las fuentes. También es posible utilizar sus propias fuentes personalizadas en una experiencia de portal. En este tema, la fuente Acme del directorio de fuentes de Google se utilizará para personalizar una experiencia de portal.

    Vinculación a un archivo de fuente personalizado

    El directorio de fuentes de Google proporciona fuentes de código abierto que se pueden utilizar en páginas web. Busque una fuente para usarla en la experiencia. En este tema, se utilizará la fuente Acme .

    Según la ayuda de Google, la siguiente línea debe estar incrustada en el documento.

      <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">

    Para incluir esta línea en una experiencia de portal, siga estos pasos:

    1. Edite la experiencia.
    2. Haga clic en APARIENCIA Y COMPORTAMIENTO > Encabezado y pie de página en la navegación izquierda.
    3. Pegue la <link> etiqueta en el campo HTML de encabezado personalizado .
    4. Haga clic en Guardar.

    Creación de CSS para la fuente personalizada

    Para utilizar la fuente personalizada, se agregará una style etiqueta al campo HTML de encabezado personalizado del portal para dar estilo a los objetos de texto adecuados.

    Las herramientas de desarrollo proporcionadas con su navegador son útiles para obtener los nombres de clase de los objetos de la página que desea dar estilo (objetos para los que queremos cambiar la fuente). Tenga en cuenta que los nombres de los elementos cambiarán en función de la plantilla que se esté utilizando. En el siguiente ejemplo, cambiaremos la fuente del vídeo destacado y la fuente utilizada para los nombres de vídeo que aparecen en la cuadrícula de vídeo de la página. Las capturas de pantalla se toman usando Google Chrome.

    1. Con las herramientas de desarrollo del navegador, inspeccione el elemento en la experiencia para la que desea cambiar la fuente. En este caso, se está inspeccionando el título del vídeo destacado. Busque el nombre de la clase del objeto.
    2. Agregue el CSS apropiado al campo HTML de encabezado personalizado para dar estilo al título del vídeo destacado con la nueva fuente.
        
            <style>
              .video-name {
               font-family:Acme;
             }
            </style>
            
    3. Busque el nombre de la clase de los títulos de vídeo en la cuadrícula.
    4. Añada el CSS apropiado dentro de la <style> etiqueta existente para dar estilo a los títulos de vídeo en la cuadrícula con la nueva fuente.
      
            .bc-video-browser .bc-video-grid-items .bc-video-grid-item .caption {
             font-family:Acme;
          }
            
    5. Confirme que el campo HTML de encabezado personalizado contiene lo siguiente.
      <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
        <style>
            .video-name {
            font-family:Acme;
          }
      
          .bc-video-browser .bc-video-grid-items .bc-video-grid-item .caption {
          font-family:Acme;
        }
      </style>
    6. Haga clic en Guardar.
    7. Haga clic en Vista previa previa > adaptable para comprobar que se muestra la fuente actualizada.
    8. Cuando haya terminado, publique la experiencia.

    El archivo CSS completo de la plantilla se puede ver haciendo clic en el enlace Ver CSS como parte de la configuración > Personalizada de APARIENCIA Y COMPORTAMIENTO . Si desea cambiar todas las instancias de una fuente, puede buscar todas las apariciones de font-family en la plantilla CSS y agregar las entradas apropiadas a su <style> etiqueta.