problemas al instalar el plugin de phocafont  

Hola Rosario, Buenos Días.

Para añadir las fuentes de Google, tienes dos opciones.

1ª- Añadir la fuente manualmente:
.- Dirígete a Google fonts
.- Busca la Fuente que quieres añadir
.- Pulsa en el Icono + para seleccionar la fuente:

.- Selecciona la Opción import y copia el código.

.- Edita el archivo custom.css que encontraras en templates/yoo_vida/css/custom.css
.- Añade el código que conseguiste de google al principio de ese archivo:

@import url('https://fonts.googleapis.com/css?family=Roboto');
 

El último paso consiste ahora en determinar a qué elemento queremos destinar las Fuentes de Google. Por ejemplo es posible que deseemos asignar la nueva fuente de Google para el elemento h1. Para ello editaremos el archivo custom.css dentro de la carpeta templates/nombre_plantilla/css/custom.css.

h1 {
 font-family: "Gentium Basic ', serif;
 }

2ª- Opción Mediante una extensión:
Si no te sientes cómoda o segura editando archivos, siempre se pueden descargar e instalar uno de los plugins disponibles para agregar el código de Google Fonts, como el plugin joomla HD-GFonts

.- Una vez Instalado accede a Extensiones -> Gestor de plugins y edita el plugin.
.- a
.- Accedemos a Extensiones -> Gestor de plugins y edita el plugin.
.- En la parte derecha de la pantalla, en Parámetros del plugin, seleccionamos una de las fuentes en la primera opción activada.
.- Añade la clase a la que hará referencia ese estilo de fuente ' H1, H2. P, etc... ?
.- Puede aplicar más reglas CSS a la clase añadiéndolas en el campo Additional CSS (por ejemplo, "color: blue"). Para añadir más de una regla CSS hay que separarlos con un punto y coma (por ejemplo, "color: red; font-size: 20px").

Con estos pasos ya tendrás importada y añadida el tipo de letra en tu web.

Espero que esta información te sirva 😉

Un saludo

¿Y si tengo la tipografía que quiero en el ordenador y la quiero insertar, esto es posible?, es una tipografía de pago, la Metric y he leído que tendría que subirla a la raíz delservidor pero esto me puede dar conflicto de derechos

Hola Rosario.

he leído que tendría que subirla a la raíz delservidor pero esto me puede dar conflicto de derechos
Bueno si tienes licencia de la fuente para poderla utilizar no tienes que tener problemas.

Los pasos serian los siguientes:
.- Crea una carpeta en tu web que sea por ejemplo fonts
.- Sube los archivos de la fuente a esa carpeta.

Ahora toca lo divertido:
La regla CSS @font-face permite definir una tipografía e importarla para su uso en una página web.
@font-face es soportado por todos los navegadores, incluso versiones bastantes antiguas, pero no todos los navegadores admiten la fuente en los mismos formatos. Por ejemplo, Internet Explorer por debajo de la versión 9 sólo admite formato OET (Embedded Open Type) y a partir de la versión 9 soporta los formatos WOFF y TTF/OTF. Por otro lado, ninguno de los demás principales navegadores soporta fuentes OET.

.- Añade la regla @font-face a tu archivo de estilos CSS, un ejemplo seria el siguiente:

@font-face {
    font-family: "metric";
    src: url(fonts/metric.ttf) format("truetype");
}

El primer paso ya lo tendrías que es añadir la fuente a tu web.

.- El siguiente paso seria añadir la fuente a los estilos que necesites, por ejemplo:

h1 { font-family: "metric", sans-serif; }

Te dejo información en este enlace -> @font-face: Como utilizar cualquier fuente/tipografía en tu web

Un saludo

Gracias pr las explicaciones,
¿Funciona con archivos .otf?, además me encuentro con que tengo un archivo para cada variación de la tipografía, es decir, Metri-bold, Metric-semibold, Metric-italic...¿tengo que escribir esta rutina tantas veces como archivos tengo?
@font-face {
font-family: "metric";
src: url(fonts/metric.ttf) format("truetype");
}

es decir
@font-face {
font-family: "metric-bold";
src: url(fonts/metric-bold.ttf) format("truetype");
}

@font-face {
font-family: "metric-semibold";
src: url(fonts/metric-semibold.ttf) format("truetype");
}
...etc.?

Hola Rosario.

¿Funciona con archivos .otf?
Tendría que funcionar, en este caso seria añadir los formatos que tienes de la fuente:

@font-face {
font-family: 'metric';
src: url('fonts/metric.eot');
src: url('fonts/metric.eot?#iefix') format('embedded-opentype'),
src: url('fonts/metric.otf') format(‘opentype’),
url('fonts/metric.ttf') format('truetype');
}

Lo suyo seria que tuvieras los formatos EOT, TTF. OTF y SGV para que se puedan mostrar bien en todos los navegadores.

.¿tengo que escribir esta rutina tantas veces como archivos tengo?
Si, si quieres utilizar todos los tipos, tienes que añadirlo para todos...

Un saludo