Ingesloten lettertype

Door Martijn Winters op 21-03-2019 13:35

5.054 views

IK heb een html pagina met woorden in verschillende fonts (lettertypes gedownload van internet). Maar als ik deze met een andere computer open zie ik geen fonts omdat de fonts niet geinstaleerd zijn op die computer. Is er een manier om die fonts toch te kunnen zien op de computer waar die fonts niet op geinstaleerd zijn? Zonder een font te moeten installeren. Hoe dit in mijn pagina moet toepassen?

<body>
<ul>
<li style="font-family:sans-serif;font-size:20px">Hond</li>
<li style="font-family:anthology Outline DEMO;font-size:20px">Paard</li>
<li style="font-family:Regular Fashion DEMO;font-size:20px">Zebra</li>
<li style="font-family:Back to Black Demo;font-size:20px">Poes</li>

</ul>
</body>

- Ariën -

25-03-2019 14:22

Die namen met de bijbehorende fonts zijn in je CSS gedefinieerd in @font-face. Je kan ze ook 'Mooi', 'Lelijk' of 'Flep' of whatever noemen.

M Martijn Winters

26-03-2019 13:22

Bij de src: url van de @font-face kan ik daar eender welk lettertype plaatsen of zijn door voorwaarden aan verbonden?

@font-face {
font-family: mySecondFont;
src: url(Anthology-Outline DEMO.ttf);
}

- Ariën -

26-03-2019 16:03

Elke lettertype die je op de server hebt staan. Let wel op de licenties ervan!

M Martijn Winters

26-03-2019 17:04

Kan je ook zonder server werken?

- Ariën -

26-03-2019 17:16 gewijzigd op 26-03-2019 17:23

Dan kan je websites nooit serveren aan de gebruiker... ;-)

Ook het external lettertype wil je ophalen bij het aanroepen van de website. Dus die moet ook op de server staan. Als je het makkelijker wilt doen kan je ook een font via Google gebruiken.

Ward van der Put

26-03-2019 18:19

Als je een bepaald effect wilt bereiken met die specifieke lettertypen, kun je er een plaatje van maken.

Anders zou ik het mezelf makkelijk maken en inderdaad Google Fonts gebruiken. Google laadt namelijk ook het juiste type lettertypebestand, afhankelijk van de gebruikte browser.

M Martijn Winters

26-03-2019 18:37

Als ik met google fonts wil werken moet dat ook via @font-face doen?

A Adoptive Solution

26-03-2019 18:51 gewijzigd op 26-03-2019 18:51

Google geeft uitleg hoe je het moet doen.

Embed Font

To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

of zo :

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

Use the following CSS rules to specify these families:

font-family: 'Roboto', sans-serif;

Je zou het haast zelf kunnen ontdekken.

M Martijn Winters

27-03-2019 12:53

Werkt gooogle fonts ook voor meerdere fonts op 1 pagina?

A Adoptive Solution

27-03-2019 13:10 gewijzigd op 27-03-2019 13:13

Kijk

@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css?family=Grand+Hotel);
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed);

En dan zoiets:

<p style="font-family: 'Grand Hotel', cursive; font-size: 1.500em;">The End</p>

Reageren

Inloggen om te reageren