Uppdaterad 2025-02-03

Typsnitt

Exempel på snirklig anfang för texten Lorem ipsum

Förkortningar

TTF - True Type Font
OTF - Open Type Fonts (Adobe)
EOT - Embedded Open Type
WOFF - Web Open Font Format (Mozilla)
SVG - Scalable Vector Graphics
WOFF2 -

FOUT - Flash of Unstyled Text

Filändelser

.ttf
.eot
.svg
.woff
.woff2

Namn och kodpunkt för ikoner från Font Awesome `4.7.0` (den sista versionen som var helt gratis)

fa-font

Snabbkommandon

⌘0Förvald typsnittsstorlek
⌘+Större
⌘-Mindre

Person

Aldus Manutius

Text för exempel

Lorem ipsum

Double-story and single-story lowercase miniscule G

Vad är en serif?

En serif är en bokstav med ett typsnitt där bokstäverna har "klackar".

Program

Typsnittsbok
FontPrep
Photoshop

Programmeringsspråk

Definiera ett helt eget typsnitt i CSS

@font-face {
	font-family: myFirstFont;
	src: url(sansation_light.woff);
}

Använda ett helt eget typsnitt i CSS

div {
	font-family: myFirstFont;
}

Regler i CSS

font-display
font-family
font-feature-settings^ny
font-kerning^ny
font-language-override^ny
font-size
font-size-adjust^ny
font-stretch^ny
font-style
font-synthesis^ny
font-variant
font-weight

Exempel på ligaturer

ff
fi
fl
ffi
ffl

Font Awesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.1/css/all.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

Material Icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Typsnitt från Google

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> @import url(//fonts.googleapis.com/css?family=Open+Sans);

Typsnitt från egen server

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
		 url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
		 url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
		 url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}