Configurar Fuentes Personalizadas para Usar en una Aplicación Vinyl¶

Este artículo le explica cómo configurar fuentes personalizadas para usar en una aplicación Vinyl. En el caso de que desee utilizar un tipo de fuente específico que no está disponible a través de Google Fonts, Vinyl admite la capacidad de trabajar con un tipo de fuente personalizado.

Consulte Configurar Google Fonts para usar en Vinyl artículo para obtener información sobre la configuración de Google Fonts.

Caso de Uso¶

Las empresas suelen tener un tipo de fuente específico declarado como parte de sus pautas de marca, y es posible que esa fuente no esté disponible en Google Fonts. En este escenario, Vinyl admite la capacidad de cargar los archivos de fuentes como parte de un widget y hacer referencia a ellos en un archivo CSS usando el @font-face funcionalidad.

Configurar Fuentes Personalizadas¶

1. Siga los pasos descritos en el Cargador CSS artículo para recuperar la carpeta CSS Loader.zip
2. Extraiga el contenido de la carpeta .zip.

3. Copie los archivos de fuentes personalizados que usará para su aplicación Vinyl en el directorio superior de CSS Loader.

   • Por ejemplo: SuisseIntl-Regular.otf, SuisseIntl-Light.otf, SuisseIntl-Bold.otf, SuisseIntl-SemiBold.otf

4. Utilice un programa de edición de código, como Visual Studio Code, para abrir el styles.css archivo para editar

5. Configure la siguiente información en el styles.css archivo para especificar información para la fuente personalizada deseada usando el @font-face regla:

   • El peso de fuente normal debe especificarse primero en el archivo estilos.css. Vea el ejemplo de sintaxis a continuación.
   • Los valores de peso de fuente deben estar en formato numérico (por ejemplo, 300, 400, 500, 600, etc.). Usar más claro, normal, negrita y más audaz no funcionará para pesos múltiples.
   • Los valores de peso de fuente (por ejemplo, 300, 400, 500, 600, etc.) que establezca para cada archivo de fuente serán los valores de peso de fuente que utilice en Temas para cambiar el peso y solo pueden existir una vez por peso (por ejemplo, no puede tener 2 archivos de fuente configurados con el mismo valor de peso de fuente)

   Ejemplo de sintaxis de Styles.css

   /* Suisse Font */
   
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Regular.otf") format("opentype");
       font-weight: 400;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Bold.otf") format("opentype");
       font-weight: 600;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-SemiBold.otf") format("opentype");
       font-weight: 500;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Light.otf") format("opentype");
       font-weight: 300;
       font-style: normal;
   }
   

6. Guarde todos los cambios en el styles.css archivo

7. Siga los pasos descritos en el Cargador CSS para cargar el widget CSS Loader en una colección que esté usando su aplicación
8. Siga los pasos descritos para agregar el cargador CSS como widget del sitio.

9. Por último, debes configurar el tema de tu aplicación para especificar la fuente personalizada.

   • Navega hasta el tema de tu aplicación
   • Agregue un estilo dirigido al área del sitio, seleccione Fuente como Tipo de estilo y establezca el valor Nombre en el nombre de fuente personalizado. Por ejemplo: "SuisseIntl"