Font style in CSS | HTML font family list | how to change font style in html - Coding Help

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

And in the stylesheet

body {
   font-family: 'Roboto', sans-serif;
}

In any case the desired font must be available when the client displays the page. You can host your own or use a free service like mentioned above.

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

body {
  font-family: 'Roboto', sans-serif;
}

put it in your CSS file, I hope it will work.

<html>
<head>
<style>
p.a {
font-style: normal;
}p.b {
font-style: italic;
}p.c {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style Property</h1><p class=”a”>This is a paragraph, normal.</p>
<p class=”b”>This is a paragraph, italic.</p>
<p class=”c”>This is a paragraph, oblique.</p></body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: “Lucida Handwriting”;
}.p2 {
font-family: Arial;
}.p3 {
font-family: Papyrus;
}
</style>
</head>
<body><h1>CSS font-family</h1>
<p class=”p1″>This is a paragraph, shown in the Times New Roman font.</p>
<p class=”p2″>This is a paragraph, shown in the Arial font.</p>
<p class=”p3″>This is a paragraph, shown in the Lucida Console font.</p></body>
</html>

Font Size html style

h1 {
font-size: 40px;
}h2 {
font-size: 30px;
}p {
font-size: 14px;
}

Some Font Examples

Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

Font Pairing Rules

FONT FAMILY	APPEARANCE
Abadi MT Condensed Light	Abadi MT Condensed Light
Aharoni	Aharoni
Aharoni Bold	Aharoni Bold
Aldhabi	Aldhabi
AlternateGothic2 BT	AlternateGothic2 BT
Andale Mono	Andale Mono
Andalus	Andalus
Angsana New	Angsana New
AngsanaUPC	AngsanaUPC
Aparajita	Aparajita
Apple Chancery	Apple Chancery
Arabic Typesetting	Arabic Typesetting
Arial	Arial
Arial Black	Arial Black
Arial narrow	Arial narrow
Arial Nova	Arial Nova
Arial Rounded MT Bold	Arial Rounded MT Bold
Arnoldboecklin	Arnoldboecklin
Avanta Garde	Avanta Garde
Bahnschrift	Bahnschrift
Bahnschrift Light	Bahnschrift Light
Bahnschrift SemiBold	Bahnschrift SemiBold
Bahnschrift SemiLight	Bahnschrift SemiLight
Baskerville	Baskerville
Batang	Batang
BatangChe	BatangChe
Big Caslon	Big Caslon
BIZ UDGothic	BIZ UDGothic
BIZ UDMincho Medium	BIZ UDMincho Medium
Blippo	Blippo
Bodoni MT	Bodoni MT
Book Antiqua	Book Antiqua
Book Antiqua	Book Antiqua
Bookman	Bookman
Bradley Hand	Bradley Hand
Browallia New	Browallia New
BrowalliaUPC	BrowalliaUPC
Brush Script MT	Brush Script MT
Brush Script Std	Brush Script Std
Brushstroke	Brushstroke
Calibri	Calibri
Calibri Light	Calibri Light
Calisto MT	Calisto MT
Cambodian	Cambodian
Cambria	Cambria
Cambria Math	Cambria Math
Candara	Candara
Century Gothic	Century Gothic
Chalkduster	Chalkduster
Cherokee	Cherokee
Comic Sans	Comic Sans
Comic Sans MS	Comic Sans MS
Consolas	Consolas
Constantia	Constantia
Copperplate	Copperplate
Copperplate Gothic Light	Copperplate Gothic Light
Copperplate Gothic Bold	Copperplate Gothic Bold
Corbel	Corbel
Cordia New	Cordia New
CordiaUPC	CordiaUPC
Coronetscript	Coronetscript
Courier	Courier
Courier New	Courier New
DaunPenh	DaunPenh
David	David
DengXian	DengXian
DFKai-SB	DFKai-SB
Didot	Didot
DilleniaUPC	DilleniaUPC
DokChampa	DokChampa
Dotum	Dotum
DotumChe	DotumChe
Ebrima	Ebrima
Estrangelo Edessa	Estrangelo Edessa
EucrosiaUPC	EucrosiaUPC
Euphemia	Euphemia
FangSong	FangSong
Florence	Florence
Franklin Gothic Medium	Franklin Gothic Medium
FrankRuehl	FrankRuehl
FreesiaUPC	FreesiaUPC
Futara	Futara
Gabriola	Gabriola
Gadugi	Gadugi
Garamond	Garamond
Gautami	Gautami
Geneva	Geneva
Georgia	Georgia
Georgia Pro	Georgia Pro
Gill Sans	Gill Sans
Gill Sans Nova	Gill Sans Nova
Gisha	Gisha
Goudy Old Style	Goudy Old Style
Gulim	Gulim
GulimChe	GulimChe
Gungsuh	Gungsuh
GungsuhChe	GungsuhChe
Hebrew	Hebrew
Hoefler Text	Hoefler Text
HoloLens MDL2 Assets	HoloLens MDL2 Assets
Impact	Impact
Ink Free	Ink Free
IrisUPC	IrisUPC
Iskoola Pota	Iskoola Pota
Japanese	Japanese
JasmineUPC	JasmineUPC
Javanese Text	Javanese Text
Jazz LET	Jazz LET
KaiTi	KaiTi
Kalinga	Kalinga
Kartika	Kartika
Khmer UI	Khmer UI
KodchiangUPC	KodchiangUPC
Kokila	Kokila
Korean	Korean
Lao	Lao
Lao UI	Lao UI
Latha	Latha
Leelawadee	Leelawadee
Leelawadee UI	Leelawadee UI
Leelawadee UI Semilight	Leelawadee UI Semilight
Levenim MT	Levenim MT
LilyUPC	LilyUPC
Lucida Bright	Lucida Bright
Lucida Console	Lucida Console
Lucida Handwriting	Lucida Handwriting
Lucida Sans	Lucida Sans
Lucida Sans Typewriter	Lucida Sans Typewriter
Lucida Sans Unicode	Lucida Sans Unicode
Lucidatypewriter	Lucidatypewriter
Luminari	Luminari
Malgun Gothic	Malgun Gothic
Malgun Gothic Semilight	Malgun Gothic Semilight
Mangal	Mangal
Marker Felt	Marker Felt
Marlett	Marlett
Meiryo	Meiryo
Meiryo UI	Meiryo UI
Microsoft Himalaya	Microsoft Himalaya
Microsoft JhengHei	Microsoft JhengHei
Microsoft JhengHei UI	Microsoft JhengHei UI
Microsoft New Tai Lue	Microsoft New Tai Lue
Microsoft PhagsPa	Microsoft PhagsPa
Microsoft Sans Serif	Microsoft Sans Serif
Microsoft Tai Le	Microsoft Tai Le
Microsoft Uighur	Microsoft Uighur
Microsoft YaHei	Microsoft YaHei
Microsoft YaHei UI	Microsoft YaHei UI
Microsoft Yi Baiti	Microsoft Yi Baiti
MingLiU	MingLiU
MingLiU_HKSCS	MingLiU_HKSCS
MingLiU_HKSCS-ExtB	MingLiU_HKSCS-ExtB
MingLiU-ExtB	MingLiU-ExtB
Miriam	Miriam
Monaco	Monaco
Mongolian Baiti	Mongolian Baiti
MoolBoran	MoolBoran
MS Gothic	MS Gothic
MS Mincho	MS Mincho
MS PGothic	MS PGothic
MS PMincho	MS PMincho
MS UI Gothic	MS UI Gothic
MV Boli	MV Boli
Myanmar Text	Myanmar Text
Narkisim	Narkisim
Neue Haas Grotesk Text Pro	Neue Haas Grotesk Text Pro
New Century Schoolbook	New Century Schoolbook
News Gothic MT	News Gothic MT
Nirmala UI	Nirmala UI
No automatic language associations	No automatic language associations
Noto	Noto
NSimSun	NSimSun
Nyala	Nyala
Oldtown	Oldtown
Optima	Optima
Palatino	Palatino
Palatino Linotype	Palatino Linotype
papyrus	papyrus
Parkavenue	Parkavenue
Perpetua	Perpetua
Plantagenet Cherokee	Plantagenet Cherokee
PMingLiU	PMingLiU
Raavi	Raavi
Rockwell	Rockwell
Rockwell Extra Bold	Rockwell Extra Bold
Rockwell Nova	Rockwell Nova
Rockwell Nova Cond	Rockwell Nova Cond
Rockwell Nova Extra Bold	Rockwell Nova Extra Bold
Rod	Rod
Sakkal Majalla	Sakkal Majalla
Sanskrit Text	Sanskrit Text
Segoe MDL2 Assets	Segoe MDL2 Assets
Segoe Print	Segoe Print
Segoe Script	Segoe Script
Segoe UI	Segoe UI
Segoe UI Emoji	Segoe UI Emoji
Segoe UI Historic	Segoe UI Historic
Segoe UI Symbol	Segoe UI Symbol
Shonar Bangla	Shonar Bangla
Shruti	Shruti
SimHei	SimHei
SimKai	SimKai
Simplified Arabic	Simplified Arabic
Simplified Chinese	Simplified Chinese
SimSun	SimSun
SimSun-ExtB	SimSun-ExtB
Sitka	Sitka
Snell Roundhan	Snell Roundhan
Stencil Std	Stencil Std
Sylfaen	Sylfaen
Symbol	Symbol
Tahoma	Tahoma
Thai	Thai
Times New Roman	Times New Roman
Traditional Arabic	Traditional Arabic
Traditional Chinese	Traditional Chinese
Trattatello	Trattatello
Trebuchet MS	Trebuchet MS
Tunga	Tunga
UD Digi Kyokasho	UD Digi Kyokasho
UD Digi KyoKasho NK-R	UD Digi KyoKasho NK-R
UD Digi KyoKasho NP-R	UD Digi KyoKasho NP-R
UD Digi KyoKasho N-R	UD Digi KyoKasho N-R
Urdu Typesetting	Urdu Typesetting
URW Chancery	URW Chancery
Utsaah	Utsaah
Vani	Vani
Verdana	Verdana
Verdana Pro	Verdana Pro
Vijaya	Vijaya
Vrinda	Vrinda
Webdings	Webdings
Westminster	Westminster
Wingdings	Wingdings
Yu Gothic	Yu Gothic
Yu Gothic UI	Yu Gothic UI
Yu Mincho	Yu Mincho
Zapf Chancery	Zapf Chancery

Font style in CSS | HTML font family list | how to change font style in html

ByCoding Help

Font Size html style

Some Font Examples

Font Pairing Rules

By Coding Help

Related Post

table css html template

Async and Defer difference || How to use Async and Defer || How to load JS and CSS before and after

+20 Free login page design using html and css

Leave a Reply Cancel reply

You missed

🚀 Get 20% EXTRA Discount on Hostinger Web Hosting – Promo Code, Coupon Code,Refer Link

Namecheap Promo Code 2025 – Upto 70% OFF + Refer Link Bonus | Coupon Codes + Cookie Clear Guide

MilesWeb Coupon Code 2025 – Get Upto 90% OFF on Web Hosting | Promo Codes + Refer Link

Error connection timed out Error Fix 100% || How to Fix the ERR CONNECTION TIMED OUT Еrror 2025