Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Como usar dos o mas variantes de una sola fuente de Google Fonts

CSS - Como usar dos o mas variantes de una sola fuente de Google Fonts

Volver
Nuevo Tema
<<>>
 
Vista:

Como usar dos o mas variantes de una sola fuente de Google Fonts

Publicado por Ezequiel (1 intervención) el 09/04/2017 04:46:46
Hola quisiera saber si puedo usar dos o mas variantes de una fuente de Google Fonts que se llama Rubik. El problema es que me parece que solo te deja usar una variante por página. Por ej: yo quiero usar la fuente Rubik que tiene las siguientes variantes: Regular, Bold, Light, Black, etc y no me deja usar en un texto la variante light y en otro texto la variante Black, es como que toma una sola variante para todo el html con la salvedad q se puede aumentar el tamaño de la letra etc pero no sin poder usar las distintas variantes de esa misma fuente en la misma página. Por favor contestenme si se puede hacer eso. Desde ya muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como usar dos o mas variantes de una sola fuente de Google Fonts

Publicado por xve (490 intervenciones) el 09/04/2017 20:08:59
Hola Ezequiel, en la configuración puedes seleccionar lo que quieras...

Por ejemplo, yo he seleccionado todas las modalidades:
1
<link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

NOTA:No es recomendable seleccionarlos todos por la carga que ello conlleva!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Enrique
Val: 126
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como usar dos o mas variantes de una sola fuente de Google Fonts

Publicado por Enrique (43 intervenciones) el 09/04/2017 20:16:07
El detalle es que debes declarar las variantes como variable por ejemplo:
1
2
3
4
@font-face {
    font-family: myFirstFont;
    src: url(https://googleapi.fonts/rubik_light.woff);

}
Con este código puedes clarar las diferentes variantes de tipografía
En el atributo font-family puedes cargarle el nombre que tú quieras
Por ejemplo
Font-family: "Rubik-regular"
O
Font-Camilo: "Rubik-Bold"

Y en el atributo url debes poner la url de la tipo de Google
Y para ocupar la diferente variante en cualquier elemento html o css
1
2
3
4
.myClass{
Font-size: 15px;
Font-family: "Rubik-regular"
}
Espero te ayude
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como usar dos o mas variantes de una sola fuente de Google Fonts

Publicado por Ezequiel (5 intervenciones) el 10/04/2017 03:32:06
Gracias. Quizas puede ser que en el html ya esta definida la fuente (en vez de definir por cada pedazo del texto una variante distinta) y por eso no me deja probar las distintas variantes pero voy a probar mañana a ver si me funciona, sino cualquier cosa les aviso.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como usar dos o mas variantes de una sola fuente de Google Fonts

Publicado por Ezequiel (5 intervenciones) el 10/04/2017 03:35:31
En el caso del primer ejemplo hice lo mismo, coloque todas pero solo me aplicaba la ultima. No me dejaba seleccionar para un texto la variante 300 (la mas suave) y la 900 (que es un tipo de negrita muy fuerte) para otro texto. Quizas con lo publicado por Enrique pueda lograr lo que quiero. Mañana les aviso.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como usar dos o mas variantes de una sola fuente de Google Fonts

Publicado por Ezequiel (5 intervenciones) el 10/04/2017 18:46:14
Hola, no me funciona. Me muestra 3 textos sin ninguna fuente. Les paso el código.

CÓDIGO CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@font-face {
    font-family: "Rubik-light",sans-serif;
    font-weight: 300;
    src: url(Rubik/Rubik-Light.ttf);
}
 
@font-face {
    font-family: "Rubik-medium",sans-serif;
    font-weight: 500;
	src: url(Rubik/Rubik-Medium.ttf);
}
 
@font-face {
   	font-family: "Rubik-black",sans-serif;
    font-weight: 900;
	src: url(Rubik/Rubik-Black.ttf);
}
 
 
.rubik-medium{
	font-family: "Rubik-medium",sans-serif;
	font-weight: 500;
}
 
.rubik-black{
	font-family: "Rubik-black",sans-serif;
	font-weight: 900;
}
 
.rubik-light{
	font-family: "Rubik-light",sans-serif;
	font-weight: 300;
}

CÓDIGO HTML
1
2
3
4
5
6
7
8
9
10
11
<div class='rubik-black'>
  <h1>hola</h1>
</div>
 
<div class='rubik-medium'>
  <h1>hola</h1>
</div>
 
<div class='rubik-light'>
  <h1>hola</h1>
</div>

Saben cuál puede ser el problema?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Enrique
Val: 126
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como usar dos o mas variantes de una sola fuente de Google Fonts

Publicado por Enrique (43 intervenciones) el 10/04/2017 20:14:34
si vas a ocupar ese método ya no es necesario que pongas las combinaciones de las tipos:
Deberías poner cualquier nombre que tu decees
1
2
3
4
5
6
7
8
@font-face {
//así no

font-family: "Rubik-light",sans-serif;
//Así debe ser

font-family: "Rubik-light";
font-weight: 300;
src: url(Rubik/Rubik-Light.ttf);
}
Y usarla de la siguiente manera
1
2
3
4
5
6
7
8
9
//en html

<div class='rubik'>
<h1>hola</h1>
</div>
 
//en tu css

.rubik{
font-family:"Rubik-light";
}

El font face solo sirve para generar una TIPO A NIVEL NAVEGAR Y QUE SE PUEDA USAR EN tu página


Hay otro detalle que encontre

Revisa que tengas las archivos .ttf a mismo nivel de tu html

Si TE ATORAS MUCHO SUBE UN ZIP CON TU PROYECTO Y TE AYUDO A LEVANTARLE LAS TIPOS
o por MP
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como usar dos o mas variantes de una sola fuente de Google Fonts

Publicado por Ezequiel (5 intervenciones) el 11/04/2017 04:48:11
Los archivos ttf los tengo en la carpeta css/Rubik/ y los llamo desde un archivo fuentes.css que esta dentro de la carpeta css. Asi sería la estructura

home/css/Rubik/(archivos ttf)

home/css/fuentes.css (archivo con los font-face que llama a los archivos ttf especificando esta ruta por ej src: url(Rubik/Rubik-Light.ttf);)

Quizas sea un problema de direccion por el cual no me anda. Voy a probar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar