CSS / html

html desde cero CSS padding & margin Viewport Color Git & github Practicar Listas & Tablas DOM Navbar Responsividad Dropdowns Float Layout Flex Layout Fuentes Inspector Grid Layout Fixed Items Iconos Animaciones Box shadow y Text shadow

CSS / html

  1. HTML desde cero
    2.
  2. CSS
    3.
  3. Padding & margin
    4.
  4. Viewport
    5.
  5. Color
    6.
  6. Git & github
    7.
  7. Practicar
    8.
  8. Listas & Tablas
    9.
  9. DOM
    10.
  10. Navbar
    11.
  11. Responsividad
    12.
  12. Dropdowns
    13.
  13. Float Layout
    14.
  14. Flex Layout
    15.
  15. Fuentes
    16.
  16. Inspector
    17.
  17. Grid Layout
    18.
  18. Fixed Items
    19.
  19. Iconos
    20.
  20. Animaciones
    21.
  21. Box & Text Shadow
    22.

Fuentes

Como incluir y editar fuentes en html ( ^__^)/

Empezamos con agregar la propiedad font-family cualquier clase que se utilice para texto, por ejemplo a, y defines la fuente que vas a usar limitada por (""), seguido de una coma y con una opcion en caso de que tu fuente no se encuentre.

a {
  font-family: "Roboto", sans-serif;
}
h1 {
  font-family: "Italiana", sans-serif;
}

Cuando HTML no reconoce la fuente que quisieras usar, entonces debes importarla. El primer metodo que usaremos es copiar y pegar el codigo embebido en el archivo HTML dentro de la etiqueta <head>. Otra opcion es importar la fuente desde el archivo CSS, para esto escribes @import url() y dentro de los parentesis escripes la URL de donde se importa la fuente.

/* Pega este codigo en el archivo html dentro de la etiqueta <head> */

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Italiana&display=swap" rel="stylesheet">

/* Pega esta linea al inicio del archivo CSS*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Metodo en el archivo HTML */
<head>
 <link
  rel="preconnect"
  href="https://fonts.googleapis.com"
 >
 <link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossorigin
 >
 <link
  href="https://fonts.googleapis.com/
  css2?family=Italiana&display=swap"
  rel="stylesheet"
 >
</head>

/* Metodo en el archivo CSS*/
@import url('https://fonts.googleapis.com/
css2?family=Montserrat:ital,wght@0,100..900;
1,100..900&display=swap');

Otras cosas que se pueden hacer con las fuentes es modificar el grosor de letra y definir un estilo de letra para que cambie de aspecto, a cursivo por ejemplo, y establecer otras fuentes diferentes en caso de que tu primera opcion falle por alguna razon. En este ejemplo estoy usando Montserrat Alternates como fuente principal y sans-serif como respaldo, un grosor de 800 y estilo normal. ( ^__^)


.montserrat-alternates-extrabold {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 800;
  font-style: normal;
}

Para agendar una entrevista puedes contactarme por estos medios

Boston, Massachusetts
sinoplecarballo@gmail.com
Martin Carballo
@martin_ashur