<!doctype html>
<
html
amp>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Google AMP amp-font</
title
>
<
script
async
src
=
</
script
>
<
script
async
custom-element
=
"amp-font"
</
script
>
<
link
rel
=
"canonical"
href
=
<
meta
name
=
"viewport"
content
=
"width=device-width,minimum-scale=1,initial-scale=1"
>
<
style
amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</
style
>
<
noscript
>
<
style
amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</
style
>
</
noscript
>
<
style
amp-custom>
:root {
--color-error: #B00020;
--color-primary: #005AF0;
}
@font-face {
font-family: 'UnavailableFont';
font-style: normal;
font-weight: 400;
src: url(fonts/UnavailableFont.ttf)
format('truetype');
}
@font-face {
font-family: 'Comic AMP';
font-style: normal;
font-weight: 400;
src: local('Comic AMP'),
url(/static/samples/fonts/ComicAMP.ttf)
format('truetype');
}
@font-face {
font-family: 'Comic AMP 2';
font-style: normal;
font-weight: 400;
src: local('Comic AMP'),
url(/static/samples/fonts/ComicAMP2.ttf)
format('truetype');
}
.unavailable-font-loaded .unavailable-font {
font-family: 'UnavailableFont';
}
.comicamp-loaded .comicamp {
font-family: 'Comic AMP';
}
.comicamp2-loaded .comicamp2 {
font-family: 'Comic AMP 2';
}
.comicamp-loading .comicamp,
.comicamp2-loading .comicamp2,
.unavailable-font-loading .unavailable-font {
color: var(--color-primary);
}
.comicamp-missing .comicamp,
.comicamp2-missing .comicamp2,
.unavailable-font-missing .unavailable-font {
color: var(--color-error);
}
</
style
>
</
head
>
<
body
>
<
div
>
<
amp-font
layout
=
"nodisplay"
font-family
=
"georgia"
timeout
=
"2000"
on-error-remove-class
=
"comicamp-loading"
on-error-add-class
=
"comicamp-missing"
on-load-remove-class
=
"comicamp-loading"
on-load-add-class
=
"comicamp-loaded"
>
</
amp-font
>
<
p
class
=
"comicamp"
>
geeks for geeks
</
p
>
</
div
>
<
div
>
<
amp-font
layout
=
"nodisplay"
font-family
=
"abc"
timeout
=
"2000"
on-error-remove-class
=
"unavailable-font-loading"
on-error-add-class
=
"unavailable-font-missing"
on-load-remove-class
=
"unavailable-font-loading"
on-load-add-class
=
"unavailable-font-loaded"
>
</
amp-font
>
<
p
class
=
"unavailable-font"
>
geeks for geeks
</
p
>
</
div
>
</
body
>
</
html
>