Skip to content

Instantly share code, notes, and snippets.

@iiic

iiic/nativni-font-display-swap.html

Created May 15, 2019 21:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iiic/c93c98ddc3023d801c5ac8001e3d6cc0 to your computer and use it in GitHub Desktop.
Save iiic/c93c98ddc3023d801c5ac8001e3d6cc0 to your computer and use it in GitHub Desktop.
Download ZIP
Demíčko nativního prohození fontu, i během načítání fontu čitelný text.
Raw
nativni-font-display-swap.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>swap</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://fonts.googleapis.com/css?family=Akronim&amp;subset=latin-ext&display=swap" rel="stylesheet">
<style>
p {
font-family: 'Akronim', cursive;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Nulla non lectus sed nisl molestie malesuada. Donec quis nibh at felis congue commodo. Fusce aliquam vestibulum ipsum. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Mauris suscipit, ligula sit amet pharetra semper,
nibh ante cursus purus, vel sagittis velit mauris vel metus. Aenean fermentum risus id tortor. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Maecenas aliquet accumsan leo.
</p>
<div>
Předchozí text se zobrazí divným až prakticky nečitelným fontem z Google Fonts.
<br>
<br>
návod pro Chrome:
<br>
<br>
Při throttlingu (záložka Network v Developer tools a poslední políčko na první liště… bude tam text "online") i ten nejpomalejší nastavený výchozí profil je moc rychlý. Ale dá se přidat vlastní, celkem pěkně funguje 50ms na všechno… font se pak načítá asi 8s.
<br>
<br>
Je nutné vymazat chache a použít <u>throttling</u>, jinak se ten Googlí font použije zlocalhostu!
<br>
<br>
CRTL+F5 nebo při otevřených developer tools (F12) se rychle dá vymazat veškerá cache přes pravé tlačítko na obnovovací ikonku a zvolením 2. nebo 3. možnosti z kontextové nabídky.
<br>
<br>
žádný javascript, jen css vlastnost font-display: swap; … podpora v prohlížečích dobrá: <a href="https://caniuse.com/#search=font-display">https://caniuse.com/#search=font-display</a>
<br>
<br>
jak blbě to fungovalo doteď se dá otestovat smazáním &display=swap z odkazu pro vložení fontu
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment