Fonte da Web

Google Fonts - Download

google-fonts-download
Arquivos
google-fonts-download
├── css
│   └── style.css
├── fonts
│   └── Lobster-Regular.ttf
└── index.html
Arquivos
google-fonts-download
├── css
│   └── style.css
├── fonts
│   └── Lobster-Regular.ttf
└── index.html
/codes/css/web-fonts/google-fonts-download/index.html
<h1>Web font</h1>
<p>Lorem ipsum dolor</p>
/codes/css/web-fonts/google-fonts-download/index.html
<h1>Web font</h1>
<p>Lorem ipsum dolor</p>
/codes/css/web-fonts/google-fonts-download/css/style.css
@font-face{
  font-family: Lobster;
  src: url(../fonts/Lobster-Regular.ttf)
}
 
h1 {
  font-family: Lobster, cursive;
}
/codes/css/web-fonts/google-fonts-download/css/style.css
@font-face{
  font-family: Lobster;
  src: url(../fonts/Lobster-Regular.ttf)
}
 
h1 {
  font-family: Lobster, cursive;
}

Referências:

Google Fonts - Online

google-fonts-online
Arquivos
google-fonts-online
├── css
│   └── style.css
└── index.html
Arquivos
google-fonts-online
├── css
│   └── style.css
└── index.html
/codes/css/web-fonts/google-fonts-online/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts - Online</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
    />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>Web font</h1>
    <p>Lorem ipsum dolor</p>
  </body>
</html>
/codes/css/web-fonts/google-fonts-online/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts - Online</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
    />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>Web font</h1>
    <p>Lorem ipsum dolor</p>
  </body>
</html>
/codes/css/web-fonts/google-fonts-online/css/style.css
h1 {
  font-family: Lobster, cursive;
}
/codes/css/web-fonts/google-fonts-online/css/style.css
h1 {
  font-family: Lobster, cursive;
}

Referências:

Google Fonts - Families

google-fonts-families
Arquivos
google-fonts-families
├── css
│   └── style.css
└── index.html
Arquivos
google-fonts-families
├── css
│   └── style.css
└── index.html
/codes/css/web-fonts/google-fonts-families/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts - Families</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h1>Web font</h1>
    <p>Lorem ipsum dolor</p>
  </body>
</html>
/codes/css/web-fonts/google-fonts-families/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts - Families</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h1>Web font</h1>
    <p>Lorem ipsum dolor</p>
  </body>
</html>
/codes/css/web-fonts/google-fonts-families/css/style.css
h1 {
  font-family: 'Lobster', cursive;
}
 
p {
  font-family: 'Roboto', sans-serif;
}
/codes/css/web-fonts/google-fonts-families/css/style.css
h1 {
  font-family: 'Lobster', cursive;
}
 
p {
  font-family: 'Roboto', sans-serif;
}

Referências:

Google Fonts - Styles

google-fonts-styles
Arquivos
google-fonts-styles
├── css
│   └── style.css
└── index.html
Arquivos
google-fonts-styles
├── css
│   └── style.css
└── index.html
/codes/css/web-fonts/google-fonts-styles/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts - Styles</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h1>Web font</h1>
    <p>Lorem ipsum <strong>dolor</strong></p>
  </body>
</html>
/codes/css/web-fonts/google-fonts-styles/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts - Styles</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h1>Web font</h1>
    <p>Lorem ipsum <strong>dolor</strong></p>
  </body>
</html>
/codes/css/web-fonts/google-fonts-styles/css/style.css
h1 {
  font-family: 'Lobster', cursive;
}
 
p {
  font-family: 'Roboto', sans-serif;
}
/codes/css/web-fonts/google-fonts-styles/css/style.css
h1 {
  font-family: 'Lobster', cursive;
}
 
p {
  font-family: 'Roboto', sans-serif;
}

Referências:

Google Fonts - Variable

google-fonts-variable
Arquivos
google-fonts-variable
├── css
│   └── style.css
├── fonts
│   └── Kufam-VariableFont_wght.ttf
└── index.html
Arquivos
google-fonts-variable
├── css
│   └── style.css
├── fonts
│   └── Kufam-VariableFont_wght.ttf
└── index.html
/codes/css/web-fonts/google-fonts-variable/index.html
<h1>Web font</h1>
<p>Lorem ipsum dolor</p>
/codes/css/web-fonts/google-fonts-variable/index.html
<h1>Web font</h1>
<p>Lorem ipsum dolor</p>
/codes/css/web-fonts/google-fonts-variable/css/style.css
@font-face{
  font-family: 'Kufam';
  src: url(../fonts/Kufam-VariableFont_wght.ttf)
}
 
h1 {
  font-family: 'Kufam', cursive;
  font-variation-settings: 'wght' 850;
}
/codes/css/web-fonts/google-fonts-variable/css/style.css
@font-face{
  font-family: 'Kufam';
  src: url(../fonts/Kufam-VariableFont_wght.ttf)
}
 
h1 {
  font-family: 'Kufam', cursive;
  font-variation-settings: 'wght' 850;
}

Referências:

Referências

Editar esta página