[Django HTML] Google fonts in Bootstrap CSS

vrijdag 28 mei 2021 09:33

Acties:

0 Henk 'm!

Topicstarter

Mijn vraag:

Ik ben bezig met een project waarin het de bedoeling is om in Django een html website te maken zonder gebruik te maken van style.css.

In plaats daarvan gebruik ik de standaard bootstrap template:

code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Nu wil ik graag een font van Google fonts gaan gebruiken, maar het lijkt maar niet te werken.

Relevante software en hardware die ik gebruik:
...
Visual Studio Code
Bootstrap website

Wat ik al gevonden of geprobeerd heb:

Regel 10 toegevoegd, ik begrijp niet of en hoe ik de aanvullende regel in google fonts gebruik ( De CSS rules to specify families).

font-family: 'Pacifico', cursive;

code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    

    <title>One1 Car Rental</title>
  </head>
  <body>
    <h1>Welcome to One1 Car Rental </h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Heeft iemand een idee hoe ik een Google font lettertype werkend krijg in enkel deze template?

...

vrijdag 28 mei 2021 09:40

Acties:

0 Henk 'm!

rvrbtcpt

Je hebt het font geladen. Nu zul je via CSS of hardcoded nog moeten aangeven welke tags je font gebruiken lijkt me. Of je stelt het in dat alles je font gebruikt.

vrijdag 28 mei 2021 09:40

Acties:

0 Henk 'm!

flugelisoke

Topicstarter

Opgelost!

code:

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet" >
    <style>body{ 
      font-family: 'Pacifico', cursive;
    }</style>

Blijkbaar werkt het als ik <style> toevoeg. Aldoende leert men blijkbaar

[ Voor 10% gewijzigd door flugelisoke op 28-05-2021 09:41 ]

vrijdag 28 mei 2021 10:37

Acties:

0 Henk 'm!

Ramon

Ik ben wel benieuwd wat de reden is om expliciet geen style.css te gebruiken?

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

donderdag 3 juni 2021 20:46

Acties:

0 Henk 'm!

edeboeck

mie noow noooothing ...

Ramon schreef op vrijdag 28 mei 2021 @ 10:37:
Ik ben wel benieuwd wat de reden is om expliciet geen style.css te gebruiken?

Terechte vraag! Als het natuurlijk enkel en alleen voor die ene file is en die font, is het gebruik van style nog aanvaardbaar, maar voor de rest is dat echt een no-go wat mij betreft.

donderdag 3 juni 2021 20:59

Acties:

+1 Henk 'm!

418O2

edeboeck schreef op donderdag 3 juni 2021 @ 20:46:
[...]

Terechte vraag! Als het natuurlijk enkel en alleen voor die ene file is en die font, is het gebruik van style nog aanvaardbaar, maar voor de rest is dat echt een no-go wat mij betreft.

Als ik zijn posts een beetje inschat is het antwoord "omdat het zo werkt"

vrijdag 4 juni 2021 08:11

Acties:

+1 Henk 'm!

DJMaze

flugelisoke schreef op vrijdag 28 mei 2021 @ 09:33:
zonder gebruik te maken van style.css.

Dan maak je een font.css, ditisnietstyle.css, of anders.
Je hebt immers CSS nodig om het font te kunnen gebruiken en je bootstrap aan te vullen met dingen die daarin missen.
Bootstrap is niet de heilige graal.

[ Voor 5% gewijzigd door DJMaze op 04-06-2021 08:11 ]

Maak je niet druk, dat doet de compressor maar

vrijdag 4 juni 2021 11:45

Acties:

0 Henk 'm!

flugelisoke

Topicstarter

Ja, ik heb er eigenlijk geen passend antwoord voor waarom het moest, maar dat was nou eenmaal de opdracht.

Bedankt voor de tips!

zondag 6 juni 2021 02:17

Acties:

0 Henk 'm!

Verwijderd

edeboeck schreef op donderdag 3 juni 2021 @ 20:46:
[...]

Terechte vraag! Als het natuurlijk enkel en alleen voor die ene file is en die font, is het gebruik van style nog aanvaardbaar, maar voor de rest is dat echt een no-go wat mij betreft.

En 1 regel voor een extra resource dat is de way to go?

zondag 6 juni 2021 17:59

Acties:

0 Henk 'm!

edeboeck

mie noow noooothing ...

Verwijderd schreef op zondag 6 juni 2021 @ 02:17:
[...]

En 1 regel voor een extra resource dat is de way to go?

Ik begrijp niet goed wat je precies bedoelt?

zondag 6 juni 2021 20:18

Acties:

+1 Henk 'm!

Verwijderd

edeboeck schreef op zondag 6 juni 2021 @ 17:59:
[...]

Ik begrijp niet goed wat je precies bedoelt?

Cascading Stylesheet:

1
2
3

body{ 
      font-family: 'Pacifico', cursive;
}

Deze css in een apart bestand zetten is een extra resource wat je weer moet inladen, wat extra laadtijd tot zich mee brengt in tegen stelling van het embedden in de source. Ook in html-emails word html doorgaans embedded.

zondag 6 juni 2021 22:05

Acties:

0 Henk 'm!

ThomasG

Verwijderd schreef op zondag 6 juni 2021 @ 20:18:
[...]

Ook in html-emails word html doorgaans embedded.

Maar dat heeft grotendeels een andere reden, namelijk dat veel email clients externe resources standaard blokkeren wegens privacy. Deze kan namelijk gebruikt worden als tracker. Als de resource wordt opgevraagd is de email gelezen, en als je er een uniek ID in zet weet je door wie. Daarom krijg je de keuze om externe resources wel of niet in te laden.

Vraag

Alle reacties