usar 2 fuentes de google fonts

quico5 · #1 (**permalink**) 19/09/2019, 08:27

Código HTML:

<link href="https://fonts.googleapis.com/css?family=Lato:700|Roboto&display=swap" rel="stylesheet">

Recuerdo que en alguna web lo declaraban solamente al BODY por CSS, y se aplicaban las 2 fuentes a la vez entre las h1,h2... y el resto de las etiquetas, ahora que lo buso no lo encuentro

A mayores se me ocurre que podría tener un tercer nivel:

Código HTML:

<link href="https://fonts.googleapis.com/css?family=Lato:700|Asap:300|Roboto:400&display=swap" rel="stylesheet">

De tal manera que llamando las tres fuentes por css solamente al body, se apliquen a titulos, al menu de navegación y al resto de la página...

Calculo que mediante font-width:300; podría heredar la fuente correspondiente;

Código HTML:

<link href="https://fonts.googleapis.com/css?family=Lato:700|Asap:300|Roboto&display=swap" rel="stylesheet">
<body style="..."><h1>una font</h1><p>otra font</p><a style="font-width:300;">otra font direfente</a></body>

Gracias por adelantado, un saludo

ArturoGallegos · #2 (**permalink**) 19/09/2019, 17:58

Estas mal carnal, seguramente viste un ejemplo de alguien mas y no terminaste de ver el código que uso.

El link de google solo carga las fuentes, tu debes crear el CSS que lo aplique

Código CSS:

Ver originalh1{font:300 15px/1.5 Asap,arial,verdana,tahoma;}
p{font:700 15px/1.5 Lato,arial,verdana,tahoma;}
a{font:400 15px/1.5 Lato,arial,verdana,tahoma;}

Date una pasada a un curso o manual de CSS básico, también podrías examinar el código de la URL que usas para invocar las fuentes.

quico5 · #3 (**permalink**) 20/09/2019, 04:51

Hola @ArturoGallegos

Código:

h1{font:300 15px/1.5 Asap,arial,verdana,tahoma;}
p{font:700 15px/1.5 Lato,arial,verdana,tahoma;}
a{font:400 15px/1.5 Lato,arial,verdana,tahoma;}

Tús "font:" son un shorthand, un atajo, y así te ahorras:
font-width:;
font-size:;
line-height:;
font-family:;

Yo me refiero a algo por el estilo que más de una vez viera en alguna web, lo probara y funcionaba, me gustara por su simpleza, quizás me haya explicado muy mal, disculpa, aunque es posible que no lo hayas visto nunca y por eso no te suene

Escribiendo el código aproximado, seria de la siguiente manera, la cual es más o menos como lo recuerdo, el funcionamiento es el siguiente, aprovechando la cascada de existencia de fuentes, primero se aplica una fuente completa y segundo se aplica una fuente parcial, que en este caso reemplazaría solo los h1,h2..., recuerdo que era funcional, quizás no lo mejor, pero cumplía su propósito:

Código HTML:

<head>
  <link href="https://fonts.googleapis.com/css?family=Lobster|Comfortaa:700&display=swap" rel="stylesheet">
  <style>
    body{font-family:lobster,Comfortaa;}
  </style>
</head>

<body>
    <h1>ABCD</h1>
    <p>ABCD</p>
</body>

La idea es aplicar un cambio tipográfico parcial, las Google Font permiten cosas como reemplazar por ejemplo ciertas letras, y funciona, hay ejemplos al respecto:

Código:

https://fonts.googleapis.com/css?family=Varela+Round&text=GOGLE

Ejemplo con 2 tipográficas aplicadas en un párrafo, donde Varela+Round se aplica sobre las letras que se ven en mayúsculas, lo que se entiende a reemplazos parciales controlados:
GOOGLE: Es un buscadOr usadO por Las pErsOnas

quico5 · #4 (**permalink**) 20/09/2019, 07:03

Poder se puede, este es un ejemplo, pero en principio llamando las tipografias por separado, que seguramente se puedan llamar a las 2 juntas y hacer lo mismo:

Si te fijas están los 9 números, en este caso se aplican las fuentes 3 simultáneamente, lo que decía es una variante, donde en lugar de limitar los caracteres a personalizar, se limite a modificar los H1 Y compañía, se que vi como se hacia alguna vez, pero pocos sitios lo tienen publicado y es díficil encontrarlo:

Código HTML:

<head>
  <link href="https://fonts.googleapis.com/css?family=Lobster&text=123" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Turret+Road&text=789" rel="stylesheet">
  <style>
    body{font-family:'Turret Road','Lobster';}
  </style>
</head>

<body>
    <h1>123456789</h1>
</body>

ArturoGallegos · #5 (**permalink**) 20/09/2019, 09:35

Esto que pones aquí es una incoherencia e innecesaria

Código CSS:

Ver originalbody{font-family:'Turret Road','Lobster';}

Se declaran varias fuentes para cuando no existe una se utilice la que le sigue, es un método utilizado principalmente para cuando usas fuentes que pueden o no existir en el sistema anfitrión o problema de compatibilidad con las importadas.

El declarar 2 fuentes que estas importando desde google fonts no le veo mucho caso, a estas alturas prácticamente cualquier navegador moderno aceptara la tipografía importada, si declaras en segundo lugar otra que también importaste pues es poco probable que llegue a usarse.

Mas bien deberías usar en segundo y tercer lugar tipografías propias del sistema operativo.

----------
Tras mas de 11 años de experiencia he visto muchos cursos y tutoriales de CSS, nunca he visto algo milagroso que aplique las fuentes como tu dices, quizás con una función SASS, Stylus, LESS... pero propio de CSS no lo creo.

Pero quien sabe, sorprendeme y enséñame algo nuevo :D

quico5 · #6 (**permalink**) 20/09/2019, 15:50

No te falta razón en todo lo que dices

Deben ser trucos ya un poco rebuscados, cómo cómo el que intento recuperar, quizás me equivoque, pero para cosas simples seria guay hacerlo más simple

Código HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Asap:400|Cabin:700">

Código HTML:

body{font-family:Asap:700,Cabin:400, ARIAL;}

Donde primero cargo FONT para H1, y luego para el resto del HTML

pero supongo que será mejor desistir

Gracias por intentar ayudarme