El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

Google Fonts és una biblioteca gratuïta de fonts web que permet als desenvolupadors i dissenyadors accedir a una àmplia varietat de tipografies per utilitzar en els seus projectes web. Integrar Google Fonts en un projecte és senzill i pot millorar significativament l'aspecte visual del teu lloc web.

Passos per Integrar Google Fonts

Seleccionar una Font

Visita el lloc web de Google Fonts.
Navega per les fonts disponibles i selecciona la que vulguis utilitzar.
Fes clic al botó "Select this font" (Selecciona aquesta font).

Obtenir el Codi d'Integració

Després de seleccionar la font, un panell apareixerà a la part inferior de la pantalla.
Fes clic al panell per expandir-lo.
Copia el codi d'integració proporcionat. Aquest codi és una etiqueta <link> que hauràs d'afegir al teu document HTML.

Afegir el Codi d'Integració al teu HTML

Obre el teu document HTML.
Afegeix l'etiqueta <link> dins de la secció <head> del teu document HTML.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Integració de Google Fonts</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Hola, món!</h1>
    <p>Aquest és un exemple d'integració de Google Fonts.</p>
</body>
</html>

Aplicar la Font amb CSS

Després d'integrar la font al teu document HTML, pots utilitzar-la en el teu CSS.
Defineix la propietat font-family en el teu fitxer CSS per aplicar la font als elements desitjats.

body {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Utilitza el pes de la font seleccionat */
}

Exemple Complet

HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Integració de Google Fonts</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hola, món!</h1>
    <p>Aquest és un exemple d'integració de Google Fonts.</p>
</body>
</html>

CSS

body {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

Exercicis Pràctics

Exercici 1: Integrar una Nova Font

Selecciona una font diferent de Google Fonts.
Afegeix la font al teu document HTML.
Aplica la nova font a tots els elements de paràgraf (<p>).

Solució

Selecciona la font "Lato" de Google Fonts.
Afegeix el següent codi al teu document HTML:

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

Aplica la font als elements de paràgraf en el teu fitxer CSS:

p {
    font-family: 'Lato', sans-serif;
}

Exercici 2: Utilitzar Múltiples Fonts

Selecciona dues fonts diferents de Google Fonts.
Afegeix ambdues fonts al teu document HTML.
Aplica una font als elements de capçalera (<h1>) i l'altra als elements de paràgraf (<p>).

Solució

Selecciona les fonts "Open Sans" i "Merriweather" de Google Fonts.
Afegeix el següent codi al teu document HTML:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet">

Aplica les fonts en el teu fitxer CSS:

h1 {
    font-family: 'Open Sans', sans-serif;
}

p {
    font-family: 'Merriweather', serif;
}

Conclusió

Integrar Google Fonts en els teus projectes web és una manera fàcil i efectiva de millorar l'aspecte visual del teu lloc. Amb només uns quants passos, pots accedir a una àmplia varietat de fonts i aplicar-les als teus elements HTML mitjançant CSS. Practica amb diferents fonts i estils per veure com poden transformar el teu disseny web.

Integració de Google Fonts

Introducció

Passos per Integrar Google Fonts

Seleccionar una Font

Obtenir el Codi d'Integració

Afegir el Codi d'Integració al teu HTML

Aplicar la Font amb CSS

Exemple Complet

HTML

CSS

Exercicis Pràctics

Exercici 1: Integrar una Nova Font

Solució

Exercici 2: Utilitzar Múltiples Fonts

Solució

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu