diff --git a/.eslintrc b/.eslintrc index 1a95465c..14b02296 100644 --- a/.eslintrc +++ b/.eslintrc @@ -24,6 +24,7 @@ "jsx-a11y/no-noninteractive-element-interactions": "off", "jsx-a11y/anchor-is-valid": "off", "no-console": "off", + "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"], "no-unused-expressions": "off", "import/no-extraneous-dependencies": "off", "import/prefer-default-export": "off", diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml index 380bc310..a010440e 100644 --- a/.github/workflows/run-tests.yml +++ b/.github/workflows/run-tests.yml @@ -45,12 +45,20 @@ jobs: -Dsonar.organization=tyktechnologies -Dsonar.projectKey=TykTechnologies_tyk-ui -Dsonar.sources=./src + -Dsonar.exclusions=src/common/sass/fontawesome.scss,src/common/sass/tykon.scss -Dsonar.coverage.exclusions=cypress/**/*.js,**/*.test.js,src/form/components/Combobox/*.js,src/form/components/Input/*.js,src/form/redux-form/**/*.js -Dsonar.cpd.exclusions=**/*.test.js,src/form/redux-form/**/*,src/common/fonts/**/*,src/form/components/Combobox/*.js,src/form/components/Input/*.js -Dsonar.test.inclusions=**/*.test.js -Dsonar.tests=./src -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info -Dsonar.eslint.eslintconfigpath=.eslintrc + -Dsonar.issue.ignore.multicriteria=S6847,S6819,S3358 + -Dsonar.issue.ignore.multicriteria.S6847.ruleKey=javascript:S6847 + -Dsonar.issue.ignore.multicriteria.S6847.resourceKey=**/* + -Dsonar.issue.ignore.multicriteria.S6819.ruleKey=javascript:S6819 + -Dsonar.issue.ignore.multicriteria.S6819.resourceKey=**/* + -Dsonar.issue.ignore.multicriteria.S3358.ruleKey=javascript:S3358 + -Dsonar.issue.ignore.multicriteria.S3358.resourceKey=**/* env: CI: true GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/sonarcloud.yml b/.github/workflows/sonarcloud.yml index 93de4b42..501c44d9 100644 --- a/.github/workflows/sonarcloud.yml +++ b/.github/workflows/sonarcloud.yml @@ -23,12 +23,20 @@ jobs: -Dsonar.organization=tyktechnologies -Dsonar.projectKey=TykTechnologies_tyk-ui -Dsonar.sources=./src + -Dsonar.exclusions=src/common/sass/fontawesome.scss,src/common/sass/tykon.scss -Dsonar.coverage.exclusions=cypress/**/*.js,**/*.test.js,src/form/components/Combobox/*.js,src/form/components/Input/*.js,src/form/redux-form/**/*.js -Dsonar.cpd.exclusions=**/*.test.js,src/form/redux-form/**/*,src/common/fonts/**/*,src/form/components/Combobox/*.js,src/form/components/Input/*.js -Dsonar.test.inclusions=**/*.test.js -Dsonar.tests=./src -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info -Dsonar.eslint.eslintconfigpath=.eslintrc + -Dsonar.issue.ignore.multicriteria=S6847,S6819,S3358 + -Dsonar.issue.ignore.multicriteria.S6847.ruleKey=javascript:S6847 + -Dsonar.issue.ignore.multicriteria.S6847.resourceKey=**/* + -Dsonar.issue.ignore.multicriteria.S6819.ruleKey=javascript:S6819 + -Dsonar.issue.ignore.multicriteria.S6819.resourceKey=**/* + -Dsonar.issue.ignore.multicriteria.S3358.ruleKey=javascript:S3358 + -Dsonar.issue.ignore.multicriteria.S3358.resourceKey=**/* env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} \ No newline at end of file diff --git a/.gitignore b/.gitignore index bc1ecf96..b2aabf2e 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ coverage *DS_Store cypress/screenshots .vscode +.scannerwork diff --git a/src/common/fonts/smoolthan_medium-demo.html b/src/common/fonts/smoolthan_medium-demo.html deleted file mode 100755 index f5f9afa2..00000000 --- a/src/common/fonts/smoolthan_medium-demo.html +++ /dev/null @@ -1,622 +0,0 @@ - - - - - - - - - - - - - Smoolthan Medium Specimen - - - - - - -
- - - -
- - -
- -
-
-
AaBb
-
-
- -
-
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
-
-
-
- - - - - - - - - - - - - - - - -
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
- -
- -
- - - -
- - -
-
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
-
- bodySmoolthan Medium -
-
- bodyArial -
-
- bodyVerdana -
-
- bodyGeorgia -
- - - -
- - -
- -
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
-
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
- -
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - -
-
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - - -
- -
- -
- -
-

Lorem Ipsum Dolor

-

Etiam porta sem malesuada magna mollis euismod

- - -
-
-
-
-

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

- - -

Pellentesque ornare sem

- -

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- -

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

- -

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

- -

Cras mattis consectetur

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

- -

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

-
- - -
- -
- - - - - - -
-
-
- -

Language Support

-

The subset of Smoolthan Medium in this kit supports the following languages:
- - Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

-

Glyph Chart

-

The subset of Smoolthan Medium in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

-
- -




-



-




-

 

-

!

!
-

"

"
-

#

#
-

$

$
-

%

%
-

&

&
-

'

'
-

(

(
-

)

)
-

*

*
-

+

+
-

,

,
-

-

-
-

.

.
-

/

/
-

0

0
-

1

1
-

2

2
-

3

3
-

4

4
-

5

5
-

6

6
-

7

7
-

8

8
-

9

9
-

:

:
-

&#59;

;
-

<

<
-

&#61;

=
-

&#62;

>
-

&#63;

?
-

&#64;

@
-

&#65;

A
-

&#66;

B
-

&#67;

C
-

&#68;

D
-

&#69;

E
-

&#70;

F
-

&#71;

G
-

&#72;

H
-

&#73;

I
-

&#74;

J
-

&#75;

K
-

&#76;

L
-

&#77;

M
-

&#78;

N
-

&#79;

O
-

&#80;

P
-

&#81;

Q
-

&#82;

R
-

&#83;

S
-

&#84;

T
-

&#85;

U
-

&#86;

V
-

&#87;

W
-

&#88;

X
-

&#89;

Y
-

&#90;

Z
-

&#91;

[
-

&#92;

\
-

&#93;

]
-

&#94;

^
-

&#95;

_
-

&#96;

`
-

&#97;

a
-

&#98;

b
-

&#99;

c
-

&#100;

d
-

&#101;

e
-

&#102;

f
-

&#103;

g
-

&#104;

h
-

&#105;

i
-

&#106;

j
-

&#107;

k
-

&#108;

l
-

&#109;

m
-

&#110;

n
-

&#111;

o
-

&#112;

p
-

&#113;

q
-

&#114;

r
-

&#115;

s
-

&#116;

t
-

&#117;

u
-

&#118;

v
-

&#119;

w
-

&#120;

x
-

&#121;

y
-

&#122;

z
-

&#123;

{
-

&#124;

|
-

&#125;

}
-

&#126;

~
-

&#160;

 
-

&#161;

¡
-

&#162;

¢
-

&#163;

£
-

&#164;

¤
-

&#165;

¥
-

&#166;

¦
-

&#167;

§
-

&#168;

¨
-

&#169;

©
-

&#170;

ª
-

&#171;

«
-

&#172;

¬
-

&#173;

­
-

&#174;

®
-

&#175;

¯
-

&#176;

°
-

&#177;

±
-

&#178;

²
-

&#179;

³
-

&#180;

´
-

&#181;

µ
-

&#182;

-

&#183;

·
-

&#184;

¸
-

&#185;

¹
-

&#186;

º
-

&#187;

»
-

&#188;

¼
-

&#189;

½
-

&#190;

¾
-

&#191;

¿
-

&#192;

À
-

&#193;

Á
-

&#194;

Â
-

&#195;

Ã
-

&#196;

Ä
-

&#197;

Å
-

&#198;

Æ
-

&#199;

Ç
-

&#200;

È
-

&#201;

É
-

&#202;

Ê
-

&#203;

Ë
-

&#204;

Ì
-

&#205;

Í
-

&#206;

Î
-

&#207;

Ï
-

&#208;

Ð
-

&#209;

Ñ
-

&#210;

Ò
-

&#211;

Ó
-

&#212;

Ô
-

&#213;

Õ
-

&#214;

Ö
-

&#215;

×
-

&#216;

Ø
-

&#217;

Ù
-

&#218;

Ú
-

&#219;

Û
-

&#220;

Ü
-

&#221;

Ý
-

&#222;

Þ
-

&#223;

ß
-

&#224;

à
-

&#225;

á
-

&#226;

â
-

&#227;

ã
-

&#228;

ä
-

&#229;

å
-

&#230;

æ
-

&#231;

ç
-

&#232;

è
-

&#233;

é
-

&#234;

ê
-

&#235;

ë
-

&#236;

ì
-

&#237;

í
-

&#238;

î
-

&#239;

ï
-

&#240;

ð
-

&#241;

ñ
-

&#242;

ò
-

&#243;

ó
-

&#244;

ô
-

&#245;

õ
-

&#246;

ö
-

&#247;

÷
-

&#248;

ø
-

&#249;

ù
-

&#250;

ú
-

&#251;

û
-

&#252;

ü
-

&#253;

ý
-

&#254;

þ
-

&#255;

ÿ
-

&#338;

Œ
-

&#339;

œ
-

&#376;

Ÿ
-

&#710;

ˆ
-

&#732;

˜
-

&#8192;

 
-

&#8193;

-

&#8194;

-

&#8195;

-

&#8196;

-

&#8197;

-

&#8198;

-

&#8199;

-

&#8200;

-

&#8201;

-

&#8202;

-

&#8208;

-

&#8209;

-

&#8210;

-

&#8211;

-

&#8212;

-

&#8216;

-

&#8217;

-

&#8218;

-

&#8220;

-

&#8221;

-

&#8222;

-

&#8226;

-

&#8230;

-

&#8239;

-

&#8249;

-

&#8250;

-

&#8287;

-

&#8364;

-

&#8482;

-

&#9724;

-

&#64259;

-

&#64260;

-
-
- - -
-
- - -
- -
- -
-
-
-

Installing Webfonts

- -

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

- -

1. Upload your webfonts

-

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

- -

2. Include the webfont stylesheet

-

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

- - - -@font-face{ - font-family: 'MyWebFont'; - src: url('WebFont.eot'); - src: url('WebFont.eot?#iefix') format('embedded-opentype'), - url('WebFont.woff') format('woff'), - url('WebFont.ttf') format('truetype'), - url('WebFont.svg#webfont') format('svg'); -} - - -

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

- <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> - -

3. Modify your own stylesheet

-

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

-p { font-family: 'WebFont', Arial, sans-serif; } - -

4. Test

-

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

-
- - -
- -
- -
- -
- - diff --git a/src/common/fonts/smoolthan_medium-italic-demo.html b/src/common/fonts/smoolthan_medium-italic-demo.html deleted file mode 100755 index 2d24faad..00000000 --- a/src/common/fonts/smoolthan_medium-italic-demo.html +++ /dev/null @@ -1,622 +0,0 @@ - - - - - - - - - - - - - Smoolthan Medium-Italic Specimen - - - - - - -
- - - -
- - -
- -
-
-
AaBb
-
-
- -
-
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
-
-
-
- - - - - - - - - - - - - - - - -
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
- -
- -
- - - -
- - -
-
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
-
- bodySmoolthan Medium-Italic -
-
- bodyArial -
-
- bodyVerdana -
-
- bodyGeorgia -
- - - -
- - -
- -
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
-
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
- -
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - -
-
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - - -
- -
- -
- -
-

Lorem Ipsum Dolor

-

Etiam porta sem malesuada magna mollis euismod

- - -
-
-
-
-

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

- - -

Pellentesque ornare sem

- -

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- -

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

- -

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

- -

Cras mattis consectetur

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

- -

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

-
- - -
- -
- - - - - - -
-
-
- -

Language Support

-

The subset of Smoolthan Medium-Italic in this kit supports the following languages:
- - Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

-

Glyph Chart

-

The subset of Smoolthan Medium-Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

-
- -

&#29;


-

&#13;

-

&#29;


-

&#32;

-

&#33;

!
-

&#34;

"
-

&#35;

#
-

&#36;

$
-

&#37;

%
-

&#38;

&
-

&#39;

'
-

&#40;

(
-

&#41;

)
-

&#42;

*
-

&#43;

+
-

&#44;

,
-

&#45;

-
-

&#46;

.
-

&#47;

/
-

&#48;

0
-

&#49;

1
-

&#50;

2
-

&#51;

3
-

&#52;

4
-

&#53;

5
-

&#54;

6
-

&#55;

7
-

&#56;

8
-

&#57;

9
-

&#58;

:
-

&#59;

;
-

&#60;

<
-

&#61;

=
-

&#62;

>
-

&#63;

?
-

&#64;

@
-

&#65;

A
-

&#66;

B
-

&#67;

C
-

&#68;

D
-

&#69;

E
-

&#70;

F
-

&#71;

G
-

&#72;

H
-

&#73;

I
-

&#74;

J
-

&#75;

K
-

&#76;

L
-

&#77;

M
-

&#78;

N
-

&#79;

O
-

&#80;

P
-

&#81;

Q
-

&#82;

R
-

&#83;

S
-

&#84;

T
-

&#85;

U
-

&#86;

V
-

&#87;

W
-

&#88;

X
-

&#89;

Y
-

&#90;

Z
-

&#91;

[
-

&#92;

\
-

&#93;

]
-

&#94;

^
-

&#95;

_
-

&#96;

`
-

&#97;

a
-

&#98;

b
-

&#99;

c
-

&#100;

d
-

&#101;

e
-

&#102;

f
-

&#103;

g
-

&#104;

h
-

&#105;

i
-

&#106;

j
-

&#107;

k
-

&#108;

l
-

&#109;

m
-

&#110;

n
-

&#111;

o
-

&#112;

p
-

&#113;

q
-

&#114;

r
-

&#115;

s
-

&#116;

t
-

&#117;

u
-

&#118;

v
-

&#119;

w
-

&#120;

x
-

&#121;

y
-

&#122;

z
-

&#123;

{
-

&#124;

|
-

&#125;

}
-

&#126;

~
-

&#160;

 
-

&#161;

¡
-

&#162;

¢
-

&#163;

£
-

&#164;

¤
-

&#165;

¥
-

&#166;

¦
-

&#167;

§
-

&#168;

¨
-

&#169;

©
-

&#170;

ª
-

&#171;

«
-

&#172;

¬
-

&#173;

­
-

&#174;

®
-

&#175;

¯
-

&#176;

°
-

&#177;

±
-

&#178;

²
-

&#179;

³
-

&#180;

´
-

&#181;

µ
-

&#182;

-

&#183;

·
-

&#184;

¸
-

&#185;

¹
-

&#186;

º
-

&#187;

»
-

&#188;

¼
-

&#189;

½
-

&#190;

¾
-

&#191;

¿
-

&#192;

À
-

&#193;

Á
-

&#194;

Â
-

&#195;

Ã
-

&#196;

Ä
-

&#197;

Å
-

&#198;

Æ
-

&#199;

Ç
-

&#200;

È
-

&#201;

É
-

&#202;

Ê
-

&#203;

Ë
-

&#204;

Ì
-

&#205;

Í
-

&#206;

Î
-

&#207;

Ï
-

&#208;

Ð
-

&#209;

Ñ
-

&#210;

Ò
-

&#211;

Ó
-

&#212;

Ô
-

&#213;

Õ
-

&#214;

Ö
-

&#215;

×
-

&#216;

Ø
-

&#217;

Ù
-

&#218;

Ú
-

&#219;

Û
-

&#220;

Ü
-

&#221;

Ý
-

&#222;

Þ
-

&#223;

ß
-

&#224;

à
-

&#225;

á
-

&#226;

â
-

&#227;

ã
-

&#228;

ä
-

&#229;

å
-

&#230;

æ
-

&#231;

ç
-

&#232;

è
-

&#233;

é
-

&#234;

ê
-

&#235;

ë
-

&#236;

ì
-

&#237;

í
-

&#238;

î
-

&#239;

ï
-

&#240;

ð
-

&#241;

ñ
-

&#242;

ò
-

&#243;

ó
-

&#244;

ô
-

&#245;

õ
-

&#246;

ö
-

&#247;

÷
-

&#248;

ø
-

&#249;

ù
-

&#250;

ú
-

&#251;

û
-

&#252;

ü
-

&#253;

ý
-

&#254;

þ
-

&#255;

ÿ
-

&#338;

Œ
-

&#339;

œ
-

&#376;

Ÿ
-

&#710;

ˆ
-

&#732;

˜
-

&#8192;

 
-

&#8193;

-

&#8194;

-

&#8195;

-

&#8196;

-

&#8197;

-

&#8198;

-

&#8199;

-

&#8200;

-

&#8201;

-

&#8202;

-

&#8208;

-

&#8209;

-

&#8210;

-

&#8211;

-

&#8212;

-

&#8216;

-

&#8217;

-

&#8218;

-

&#8220;

-

&#8221;

-

&#8222;

-

&#8226;

-

&#8230;

-

&#8239;

-

&#8249;

-

&#8250;

-

&#8287;

-

&#8364;

-

&#8482;

-

&#9724;

-

&#64259;

-

&#64260;

-
-
- - -
-
- - -
- -
- -
-
-
-

Installing Webfonts

- -

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

- -

1. Upload your webfonts

-

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

- -

2. Include the webfont stylesheet

-

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

- - - -@font-face{ - font-family: 'MyWebFont'; - src: url('WebFont.eot'); - src: url('WebFont.eot?#iefix') format('embedded-opentype'), - url('WebFont.woff') format('woff'), - url('WebFont.ttf') format('truetype'), - url('WebFont.svg#webfont') format('svg'); -} - - -

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

- <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> - -

3. Modify your own stylesheet

-

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

-p { font-family: 'WebFont', Arial, sans-serif; } - -

4. Test

-

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

-
- - -
- -
- -
- -
- - diff --git a/src/common/fonts/smoolthan_regular-demo.html b/src/common/fonts/smoolthan_regular-demo.html deleted file mode 100755 index 5a6ab388..00000000 --- a/src/common/fonts/smoolthan_regular-demo.html +++ /dev/null @@ -1,622 +0,0 @@ - - - - - - - - - - - - - Smoolthan Regular Specimen - - - - - - -
- - - -
- - -
- -
-
-
AaBb
-
-
- -
-
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
-
-
-
- - - - - - - - - - - - - - - - -
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
- -
- -
- - - -
- - -
-
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
-
- bodySmoolthan Regular -
-
- bodyArial -
-
- bodyVerdana -
-
- bodyGeorgia -
- - - -
- - -
- -
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
-
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
- -
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - -
-
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - - -
- -
- -
- -
-

Lorem Ipsum Dolor

-

Etiam porta sem malesuada magna mollis euismod

- - -
-
-
-
-

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

- - -

Pellentesque ornare sem

- -

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- -

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

- -

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

- -

Cras mattis consectetur

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

- -

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

-
- - -
- -
- - - - - - -
-
-
- -

Language Support

-

The subset of Smoolthan Regular in this kit supports the following languages:
- - Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

-

Glyph Chart

-

The subset of Smoolthan Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

-
- -

&#29;


-

&#13;

-

&#29;


-

&#32;

-

&#33;

!
-

&#34;

"
-

&#35;

#
-

&#36;

$
-

&#37;

%
-

&#38;

&
-

&#39;

'
-

&#40;

(
-

&#41;

)
-

&#42;

*
-

&#43;

+
-

&#44;

,
-

&#45;

-
-

&#46;

.
-

&#47;

/
-

&#48;

0
-

&#49;

1
-

&#50;

2
-

&#51;

3
-

&#52;

4
-

&#53;

5
-

&#54;

6
-

&#55;

7
-

&#56;

8
-

&#57;

9
-

&#58;

:
-

&#59;

;
-

&#60;

<
-

&#61;

=
-

&#62;

>
-

&#63;

?
-

&#64;

@
-

&#65;

A
-

&#66;

B
-

&#67;

C
-

&#68;

D
-

&#69;

E
-

&#70;

F
-

&#71;

G
-

&#72;

H
-

&#73;

I
-

&#74;

J
-

&#75;

K
-

&#76;

L
-

&#77;

M
-

&#78;

N
-

&#79;

O
-

&#80;

P
-

&#81;

Q
-

&#82;

R
-

&#83;

S
-

&#84;

T
-

&#85;

U
-

&#86;

V
-

&#87;

W
-

&#88;

X
-

&#89;

Y
-

&#90;

Z
-

&#91;

[
-

&#92;

\
-

&#93;

]
-

&#94;

^
-

&#95;

_
-

&#96;

`
-

&#97;

a
-

&#98;

b
-

&#99;

c
-

&#100;

d
-

&#101;

e
-

&#102;

f
-

&#103;

g
-

&#104;

h
-

&#105;

i
-

&#106;

j
-

&#107;

k
-

&#108;

l
-

&#109;

m
-

&#110;

n
-

&#111;

o
-

&#112;

p
-

&#113;

q
-

&#114;

r
-

&#115;

s
-

&#116;

t
-

&#117;

u
-

&#118;

v
-

&#119;

w
-

&#120;

x
-

&#121;

y
-

&#122;

z
-

&#123;

{
-

&#124;

|
-

&#125;

}
-

&#126;

~
-

&#160;

 
-

&#161;

¡
-

&#162;

¢
-

&#163;

£
-

&#164;

¤
-

&#165;

¥
-

&#166;

¦
-

&#167;

§
-

&#168;

¨
-

&#169;

©
-

&#170;

ª
-

&#171;

«
-

&#172;

¬
-

&#173;

­
-

&#174;

®
-

&#175;

¯
-

&#176;

°
-

&#177;

±
-

&#178;

²
-

&#179;

³
-

&#180;

´
-

&#181;

µ
-

&#182;

-

&#183;

·
-

&#184;

¸
-

&#185;

¹
-

&#186;

º
-

&#187;

»
-

&#188;

¼
-

&#189;

½
-

&#190;

¾
-

&#191;

¿
-

&#192;

À
-

&#193;

Á
-

&#194;

Â
-

&#195;

Ã
-

&#196;

Ä
-

&#197;

Å
-

&#198;

Æ
-

&#199;

Ç
-

&#200;

È
-

&#201;

É
-

&#202;

Ê
-

&#203;

Ë
-

&#204;

Ì
-

&#205;

Í
-

&#206;

Î
-

&#207;

Ï
-

&#208;

Ð
-

&#209;

Ñ
-

&#210;

Ò
-

&#211;

Ó
-

&#212;

Ô
-

&#213;

Õ
-

&#214;

Ö
-

&#215;

×
-

&#216;

Ø
-

&#217;

Ù
-

&#218;

Ú
-

&#219;

Û
-

&#220;

Ü
-

&#221;

Ý
-

&#222;

Þ
-

&#223;

ß
-

&#224;

à
-

&#225;

á
-

&#226;

â
-

&#227;

ã
-

&#228;

ä
-

&#229;

å
-

&#230;

æ
-

&#231;

ç
-

&#232;

è
-

&#233;

é
-

&#234;

ê
-

&#235;

ë
-

&#236;

ì
-

&#237;

í
-

&#238;

î
-

&#239;

ï
-

&#240;

ð
-

&#241;

ñ
-

&#242;

ò
-

&#243;

ó
-

&#244;

ô
-

&#245;

õ
-

&#246;

ö
-

&#247;

÷
-

&#248;

ø
-

&#249;

ù
-

&#250;

ú
-

&#251;

û
-

&#252;

ü
-

&#253;

ý
-

&#254;

þ
-

&#255;

ÿ
-

&#338;

Œ
-

&#339;

œ
-

&#376;

Ÿ
-

&#710;

ˆ
-

&#732;

˜
-

&#8192;

 
-

&#8193;

-

&#8194;

-

&#8195;

-

&#8196;

-

&#8197;

-

&#8198;

-

&#8199;

-

&#8200;

-

&#8201;

-

&#8202;

-

&#8208;

-

&#8209;

-

&#8210;

-

&#8211;

-

&#8212;

-

&#8216;

-

&#8217;

-

&#8218;

-

&#8220;

-

&#8221;

-

&#8222;

-

&#8226;

-

&#8230;

-

&#8239;

-

&#8249;

-

&#8250;

-

&#8287;

-

&#8364;

-

&#8482;

-

&#9724;

-

&#64259;

-

&#64260;

-
-
- - -
-
- - -
- -
- -
-
-
-

Installing Webfonts

- -

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

- -

1. Upload your webfonts

-

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

- -

2. Include the webfont stylesheet

-

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

- - - -@font-face{ - font-family: 'MyWebFont'; - src: url('WebFont.eot'); - src: url('WebFont.eot?#iefix') format('embedded-opentype'), - url('WebFont.woff') format('woff'), - url('WebFont.ttf') format('truetype'), - url('WebFont.svg#webfont') format('svg'); -} - - -

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

- <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> - -

3. Modify your own stylesheet

-

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

-p { font-family: 'WebFont', Arial, sans-serif; } - -

4. Test

-

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

-
- - -
- -
- -
- -
- - diff --git a/src/common/fonts/smoolthan_regular-italic-demo.html b/src/common/fonts/smoolthan_regular-italic-demo.html deleted file mode 100755 index 9938e80e..00000000 --- a/src/common/fonts/smoolthan_regular-italic-demo.html +++ /dev/null @@ -1,622 +0,0 @@ - - - - - - - - - - - - - Smoolthan Italic Specimen - - - - - - -
- - - -
- - -
- -
-
-
AaBb
-
-
- -
-
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
-
-
-
- - - - - - - - - - - - - - - - -
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
- -
- -
- - - -
- - -
-
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
-
- bodySmoolthan Italic -
-
- bodyArial -
-
- bodyVerdana -
-
- bodyGeorgia -
- - - -
- - -
- -
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
-
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
- -
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - -
-
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - - -
- -
- -
- -
-

Lorem Ipsum Dolor

-

Etiam porta sem malesuada magna mollis euismod

- - -
-
-
-
-

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

- - -

Pellentesque ornare sem

- -

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- -

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

- -

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

- -

Cras mattis consectetur

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

- -

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

-
- - -
- -
- - - - - - -
-
-
- -

Language Support

-

The subset of Smoolthan Italic in this kit supports the following languages:
- - Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

-

Glyph Chart

-

The subset of Smoolthan Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

-
- -

&#29;


-

&#13;

-

&#29;


-

&#32;

-

&#33;

!
-

&#34;

"
-

&#35;

#
-

&#36;

$
-

&#37;

%
-

&#38;

&
-

&#39;

'
-

&#40;

(
-

&#41;

)
-

&#42;

*
-

&#43;

+
-

&#44;

,
-

&#45;

-
-

&#46;

.
-

&#47;

/
-

&#48;

0
-

&#49;

1
-

&#50;

2
-

&#51;

3
-

&#52;

4
-

&#53;

5
-

&#54;

6
-

&#55;

7
-

&#56;

8
-

&#57;

9
-

&#58;

:
-

&#59;

;
-

&#60;

<
-

&#61;

=
-

&#62;

>
-

&#63;

?
-

&#64;

@
-

&#65;

A
-

&#66;

B
-

&#67;

C
-

&#68;

D
-

&#69;

E
-

&#70;

F
-

&#71;

G
-

&#72;

H
-

&#73;

I
-

&#74;

J
-

&#75;

K
-

&#76;

L
-

&#77;

M
-

&#78;

N
-

&#79;

O
-

&#80;

P
-

&#81;

Q
-

&#82;

R
-

&#83;

S
-

&#84;

T
-

&#85;

U
-

&#86;

V
-

&#87;

W
-

&#88;

X
-

&#89;

Y
-

&#90;

Z
-

&#91;

[
-

&#92;

\
-

&#93;

]
-

&#94;

^
-

&#95;

_
-

&#96;

`
-

&#97;

a
-

&#98;

b
-

&#99;

c
-

&#100;

d
-

&#101;

e
-

&#102;

f
-

&#103;

g
-

&#104;

h
-

&#105;

i
-

&#106;

j
-

&#107;

k
-

&#108;

l
-

&#109;

m
-

&#110;

n
-

&#111;

o
-

&#112;

p
-

&#113;

q
-

&#114;

r
-

&#115;

s
-

&#116;

t
-

&#117;

u
-

&#118;

v
-

&#119;

w
-

&#120;

x
-

&#121;

y
-

&#122;

z
-

&#123;

{
-

&#124;

|
-

&#125;

}
-

&#126;

~
-

&#160;

 
-

&#161;

¡
-

&#162;

¢
-

&#163;

£
-

&#164;

¤
-

&#165;

¥
-

&#166;

¦
-

&#167;

§
-

&#168;

¨
-

&#169;

©
-

&#170;

ª
-

&#171;

«
-

&#172;

¬
-

&#173;

­
-

&#174;

®
-

&#175;

¯
-

&#176;

°
-

&#177;

±
-

&#178;

²
-

&#179;

³
-

&#180;

´
-

&#181;

µ
-

&#182;

-

&#183;

·
-

&#184;

¸
-

&#185;

¹
-

&#186;

º
-

&#187;

»
-

&#188;

¼
-

&#189;

½
-

&#190;

¾
-

&#191;

¿
-

&#192;

À
-

&#193;

Á
-

&#194;

Â
-

&#195;

Ã
-

&#196;

Ä
-

&#197;

Å
-

&#198;

Æ
-

&#199;

Ç
-

&#200;

È
-

&#201;

É
-

&#202;

Ê
-

&#203;

Ë
-

&#204;

Ì
-

&#205;

Í
-

&#206;

Î
-

&#207;

Ï
-

&#208;

Ð
-

&#209;

Ñ
-

&#210;

Ò
-

&#211;

Ó
-

&#212;

Ô
-

&#213;

Õ
-

&#214;

Ö
-

&#215;

×
-

&#216;

Ø
-

&#217;

Ù
-

&#218;

Ú
-

&#219;

Û
-

&#220;

Ü
-

&#221;

Ý
-

&#222;

Þ
-

&#223;

ß
-

&#224;

à
-

&#225;

á
-

&#226;

â
-

&#227;

ã
-

&#228;

ä
-

&#229;

å
-

&#230;

æ
-

&#231;

ç
-

&#232;

è
-

&#233;

é
-

&#234;

ê
-

&#235;

ë
-

&#236;

ì
-

&#237;

í
-

&#238;

î
-

&#239;

ï
-

&#240;

ð
-

&#241;

ñ
-

&#242;

ò
-

&#243;

ó
-

&#244;

ô
-

&#245;

õ
-

&#246;

ö
-

&#247;

÷
-

&#248;

ø
-

&#249;

ù
-

&#250;

ú
-

&#251;

û
-

&#252;

ü
-

&#253;

ý
-

&#254;

þ
-

&#255;

ÿ
-

&#338;

Œ
-

&#339;

œ
-

&#376;

Ÿ
-

&#710;

ˆ
-

&#732;

˜
-

&#8192;

 
-

&#8193;

-

&#8194;

-

&#8195;

-

&#8196;

-

&#8197;

-

&#8198;

-

&#8199;

-

&#8200;

-

&#8201;

-

&#8202;

-

&#8208;

-

&#8209;

-

&#8210;

-

&#8211;

-

&#8212;

-

&#8216;

-

&#8217;

-

&#8218;

-

&#8220;

-

&#8221;

-

&#8222;

-

&#8226;

-

&#8230;

-

&#8239;

-

&#8249;

-

&#8250;

-

&#8287;

-

&#8364;

-

&#8482;

-

&#9724;

-

&#64259;

-

&#64260;

-
-
- - -
-
- - -
- -
- -
-
-
-

Installing Webfonts

- -

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

- -

1. Upload your webfonts

-

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

- -

2. Include the webfont stylesheet

-

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

- - - -@font-face{ - font-family: 'MyWebFont'; - src: url('WebFont.eot'); - src: url('WebFont.eot?#iefix') format('embedded-opentype'), - url('WebFont.woff') format('woff'), - url('WebFont.ttf') format('truetype'), - url('WebFont.svg#webfont') format('svg'); -} - - -

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

- <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> - -

3. Modify your own stylesheet

-

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

-p { font-family: 'WebFont', Arial, sans-serif; } - -

4. Test

-

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

-
- - -
- -
- -
- -
- - diff --git a/src/common/fonts/smoolthan_thin-demo.html b/src/common/fonts/smoolthan_thin-demo.html deleted file mode 100755 index fe7638c6..00000000 --- a/src/common/fonts/smoolthan_thin-demo.html +++ /dev/null @@ -1,622 +0,0 @@ - - - - - - - - - - - - - Smoolthan Thin Specimen - - - - - - -
- - - -
- - -
- -
-
-
AaBb
-
-
- -
-
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
-
-
-
- - - - - - - - - - - - - - - - -
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
- -
- -
- - - -
- - -
-
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
-
- bodySmoolthan Thin -
-
- bodyArial -
-
- bodyVerdana -
-
- bodyGeorgia -
- - - -
- - -
- -
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
-
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
- -
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - -
-
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - - -
- -
- -
- -
-

Lorem Ipsum Dolor

-

Etiam porta sem malesuada magna mollis euismod

- - -
-
-
-
-

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

- - -

Pellentesque ornare sem

- -

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- -

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

- -

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

- -

Cras mattis consectetur

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

- -

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

-
- - -
- -
- - - - - - -
-
-
- -

Language Support

-

The subset of Smoolthan Thin in this kit supports the following languages:
- - Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

-

Glyph Chart

-

The subset of Smoolthan Thin in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

-
- -

&#29;


-

&#13;

-

&#29;


-

&#32;

-

&#33;

!
-

&#34;

"
-

&#35;

#
-

&#36;

$
-

&#37;

%
-

&#38;

&
-

&#39;

'
-

&#40;

(
-

&#41;

)
-

&#42;

*
-

&#43;

+
-

&#44;

,
-

&#45;

-
-

&#46;

.
-

&#47;

/
-

&#48;

0
-

&#49;

1
-

&#50;

2
-

&#51;

3
-

&#52;

4
-

&#53;

5
-

&#54;

6
-

&#55;

7
-

&#56;

8
-

&#57;

9
-

&#58;

:
-

&#59;

;
-

&#60;

<
-

&#61;

=
-

&#62;

>
-

&#63;

?
-

&#64;

@
-

&#65;

A
-

&#66;

B
-

&#67;

C
-

&#68;

D
-

&#69;

E
-

&#70;

F
-

&#71;

G
-

&#72;

H
-

&#73;

I
-

&#74;

J
-

&#75;

K
-

&#76;

L
-

&#77;

M
-

&#78;

N
-

&#79;

O
-

&#80;

P
-

&#81;

Q
-

&#82;

R
-

&#83;

S
-

&#84;

T
-

&#85;

U
-

&#86;

V
-

&#87;

W
-

&#88;

X
-

&#89;

Y
-

&#90;

Z
-

&#91;

[
-

&#92;

\
-

&#93;

]
-

&#94;

^
-

&#95;

_
-

&#96;

`
-

&#97;

a
-

&#98;

b
-

&#99;

c
-

&#100;

d
-

&#101;

e
-

&#102;

f
-

&#103;

g
-

&#104;

h
-

&#105;

i
-

&#106;

j
-

&#107;

k
-

&#108;

l
-

&#109;

m
-

&#110;

n
-

&#111;

o
-

&#112;

p
-

&#113;

q
-

&#114;

r
-

&#115;

s
-

&#116;

t
-

&#117;

u
-

&#118;

v
-

&#119;

w
-

&#120;

x
-

&#121;

y
-

&#122;

z
-

&#123;

{
-

&#124;

|
-

&#125;

}
-

&#126;

~
-

&#160;

 
-

&#161;

¡
-

&#162;

¢
-

&#163;

£
-

&#164;

¤
-

&#165;

¥
-

&#166;

¦
-

&#167;

§
-

&#168;

¨
-

&#169;

©
-

&#170;

ª
-

&#171;

«
-

&#172;

¬
-

&#173;

­
-

&#174;

®
-

&#175;

¯
-

&#176;

°
-

&#177;

±
-

&#178;

²
-

&#179;

³
-

&#180;

´
-

&#181;

µ
-

&#182;

-

&#183;

·
-

&#184;

¸
-

&#185;

¹
-

&#186;

º
-

&#187;

»
-

&#188;

¼
-

&#189;

½
-

&#190;

¾
-

&#191;

¿
-

&#192;

À
-

&#193;

Á
-

&#194;

Â
-

&#195;

Ã
-

&#196;

Ä
-

&#197;

Å
-

&#198;

Æ
-

&#199;

Ç
-

&#200;

È
-

&#201;

É
-

&#202;

Ê
-

&#203;

Ë
-

&#204;

Ì
-

&#205;

Í
-

&#206;

Î
-

&#207;

Ï
-

&#208;

Ð
-

&#209;

Ñ
-

&#210;

Ò
-

&#211;

Ó
-

&#212;

Ô
-

&#213;

Õ
-

&#214;

Ö
-

&#215;

×
-

&#216;

Ø
-

&#217;

Ù
-

&#218;

Ú
-

&#219;

Û
-

&#220;

Ü
-

&#221;

Ý
-

&#222;

Þ
-

&#223;

ß
-

&#224;

à
-

&#225;

á
-

&#226;

â
-

&#227;

ã
-

&#228;

ä
-

&#229;

å
-

&#230;

æ
-

&#231;

ç
-

&#232;

è
-

&#233;

é
-

&#234;

ê
-

&#235;

ë
-

&#236;

ì
-

&#237;

í
-

&#238;

î
-

&#239;

ï
-

&#240;

ð
-

&#241;

ñ
-

&#242;

ò
-

&#243;

ó
-

&#244;

ô
-

&#245;

õ
-

&#246;

ö
-

&#247;

÷
-

&#248;

ø
-

&#249;

ù
-

&#250;

ú
-

&#251;

û
-

&#252;

ü
-

&#253;

ý
-

&#254;

þ
-

&#255;

ÿ
-

&#338;

Œ
-

&#339;

œ
-

&#376;

Ÿ
-

&#710;

ˆ
-

&#732;

˜
-

&#8192;

 
-

&#8193;

-

&#8194;

-

&#8195;

-

&#8196;

-

&#8197;

-

&#8198;

-

&#8199;

-

&#8200;

-

&#8201;

-

&#8202;

-

&#8208;

-

&#8209;

-

&#8210;

-

&#8211;

-

&#8212;

-

&#8216;

-

&#8217;

-

&#8218;

-

&#8220;

-

&#8221;

-

&#8222;

-

&#8226;

-

&#8230;

-

&#8239;

-

&#8249;

-

&#8250;

-

&#8287;

-

&#8364;

-

&#8482;

-

&#9724;

-

&#64259;

-

&#64260;

-
-
- - -
-
- - -
- -
- -
-
-
-

Installing Webfonts

- -

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

- -

1. Upload your webfonts

-

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

- -

2. Include the webfont stylesheet

-

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

- - - -@font-face{ - font-family: 'MyWebFont'; - src: url('WebFont.eot'); - src: url('WebFont.eot?#iefix') format('embedded-opentype'), - url('WebFont.woff') format('woff'), - url('WebFont.ttf') format('truetype'), - url('WebFont.svg#webfont') format('svg'); -} - - -

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

- <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> - -

3. Modify your own stylesheet

-

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

-p { font-family: 'WebFont', Arial, sans-serif; } - -

4. Test

-

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

-
- - -
- -
- -
- -
- - diff --git a/src/common/fonts/smoolthan_thin-italic-demo.html b/src/common/fonts/smoolthan_thin-italic-demo.html deleted file mode 100755 index ca31d05c..00000000 --- a/src/common/fonts/smoolthan_thin-italic-demo.html +++ /dev/null @@ -1,622 +0,0 @@ - - - - - - - - - - - - - Smoolthan Thin-Italic Specimen - - - - - - -
- - - -
- - -
- -
-
-
AaBb
-
-
- -
-
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
-
-
-
- - - - - - - - - - - - - - - - -
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
- -
- -
- - - -
- - -
-
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
-
- bodySmoolthan Thin-Italic -
-
- bodyArial -
-
- bodyVerdana -
-
- bodyGeorgia -
- - - -
- - -
- -
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
-
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
- -
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - -
-
-

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
-

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

- -
-
- -
- -
-
-

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
-

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
- -
- -
- -
-
-

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

-
-
- -
- - - - -
- -
- -
- -
-

Lorem Ipsum Dolor

-

Etiam porta sem malesuada magna mollis euismod

- - -
-
-
-
-

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

- - -

Pellentesque ornare sem

- -

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- -

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

- -

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

- -

Cras mattis consectetur

- -

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

- -

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

-
- - -
- -
- - - - - - -
-
-
- -

Language Support

-

The subset of Smoolthan Thin-Italic in this kit supports the following languages:
- - Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

-

Glyph Chart

-

The subset of Smoolthan Thin-Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

-
- -

&#29;


-

&#13;

-

&#29;


-

&#32;

-

&#33;

!
-

&#34;

"
-

&#35;

#
-

&#36;

$
-

&#37;

%
-

&#38;

&
-

&#39;

'
-

&#40;

(
-

&#41;

)
-

&#42;

*
-

&#43;

+
-

&#44;

,
-

&#45;

-
-

&#46;

.
-

&#47;

/
-

&#48;

0
-

&#49;

1
-

&#50;

2
-

&#51;

3
-

&#52;

4
-

&#53;

5
-

&#54;

6
-

&#55;

7
-

&#56;

8
-

&#57;

9
-

&#58;

:
-

&#59;

;
-

&#60;

<
-

&#61;

=
-

&#62;

>
-

&#63;

?
-

&#64;

@
-

&#65;

A
-

&#66;

B
-

&#67;

C
-

&#68;

D
-

&#69;

E
-

&#70;

F
-

&#71;

G
-

&#72;

H
-

&#73;

I
-

&#74;

J
-

&#75;

K
-

&#76;

L
-

&#77;

M
-

&#78;

N
-

&#79;

O
-

&#80;

P
-

&#81;

Q
-

&#82;

R
-

&#83;

S
-

&#84;

T
-

&#85;

U
-

&#86;

V
-

&#87;

W
-

&#88;

X
-

&#89;

Y
-

&#90;

Z
-

&#91;

[
-

&#92;

\
-

&#93;

]
-

&#94;

^
-

&#95;

_
-

&#96;

`
-

&#97;

a
-

&#98;

b
-

&#99;

c
-

&#100;

d
-

&#101;

e
-

&#102;

f
-

&#103;

g
-

&#104;

h
-

&#105;

i
-

&#106;

j
-

&#107;

k
-

&#108;

l
-

&#109;

m
-

&#110;

n
-

&#111;

o
-

&#112;

p
-

&#113;

q
-

&#114;

r
-

&#115;

s
-

&#116;

t
-

&#117;

u
-

&#118;

v
-

&#119;

w
-

&#120;

x
-

&#121;

y
-

&#122;

z
-

&#123;

{
-

&#124;

|
-

&#125;

}
-

&#126;

~
-

&#160;

 
-

&#161;

¡
-

&#162;

¢
-

&#163;

£
-

&#164;

¤
-

&#165;

¥
-

&#166;

¦
-

&#167;

§
-

&#168;

¨
-

&#169;

©
-

&#170;

ª
-

&#171;

«
-

&#172;

¬
-

&#173;

­
-

&#174;

®
-

&#175;

¯
-

&#176;

°
-

&#177;

±
-

&#178;

²
-

&#179;

³
-

&#180;

´
-

&#181;

µ
-

&#182;

-

&#183;

·
-

&#184;

¸
-

&#185;

¹
-

&#186;

º
-

&#187;

»
-

&#188;

¼
-

&#189;

½
-

&#190;

¾
-

&#191;

¿
-

&#192;

À
-

&#193;

Á
-

&#194;

Â
-

&#195;

Ã
-

&#196;

Ä
-

&#197;

Å
-

&#198;

Æ
-

&#199;

Ç
-

&#200;

È
-

&#201;

É
-

&#202;

Ê
-

&#203;

Ë
-

&#204;

Ì
-

&#205;

Í
-

&#206;

Î
-

&#207;

Ï
-

&#208;

Ð
-

&#209;

Ñ
-

&#210;

Ò
-

&#211;

Ó
-

&#212;

Ô
-

&#213;

Õ
-

&#214;

Ö
-

&#215;

×
-

&#216;

Ø
-

&#217;

Ù
-

&#218;

Ú
-

&#219;

Û
-

&#220;

Ü
-

&#221;

Ý
-

&#222;

Þ
-

&#223;

ß
-

&#224;

à
-

&#225;

á
-

&#226;

â
-

&#227;

ã
-

&#228;

ä
-

&#229;

å
-

&#230;

æ
-

&#231;

ç
-

&#232;

è
-

&#233;

é
-

&#234;

ê
-

&#235;

ë
-

&#236;

ì
-

&#237;

í
-

&#238;

î
-

&#239;

ï
-

&#240;

ð
-

&#241;

ñ
-

&#242;

ò
-

&#243;

ó
-

&#244;

ô
-

&#245;

õ
-

&#246;

ö
-

&#247;

÷
-

&#248;

ø
-

&#249;

ù
-

&#250;

ú
-

&#251;

û
-

&#252;

ü
-

&#253;

ý
-

&#254;

þ
-

&#255;

ÿ
-

&#338;

Œ
-

&#339;

œ
-

&#376;

Ÿ
-

&#710;

ˆ
-

&#732;

˜
-

&#8192;

 
-

&#8193;

-

&#8194;

-

&#8195;

-

&#8196;

-

&#8197;

-

&#8198;

-

&#8199;

-

&#8200;

-

&#8201;

-

&#8202;

-

&#8208;

-

&#8209;

-

&#8210;

-

&#8211;

-

&#8212;

-

&#8216;

-

&#8217;

-

&#8218;

-

&#8220;

-

&#8221;

-

&#8222;

-

&#8226;

-

&#8230;

-

&#8239;

-

&#8249;

-

&#8250;

-

&#8287;

-

&#8364;

-

&#8482;

-

&#9724;

-

&#64259;

-

&#64260;

-
-
- - -
-
- - -
- -
- -
-
-
-

Installing Webfonts

- -

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

- -

1. Upload your webfonts

-

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

- -

2. Include the webfont stylesheet

-

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

- - - -@font-face{ - font-family: 'MyWebFont'; - src: url('WebFont.eot'); - src: url('WebFont.eot?#iefix') format('embedded-opentype'), - url('WebFont.woff') format('woff'), - url('WebFont.ttf') format('truetype'), - url('WebFont.svg#webfont') format('svg'); -} - - -

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

- <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> - -

3. Modify your own stylesheet

-

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

-p { font-family: 'WebFont', Arial, sans-serif; } - -

4. Test

-

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

-
- - -
- -
- -
- -
- - diff --git a/src/common/sass/reset.scss b/src/common/sass/reset.scss index 7fa6d16d..020a0596 100644 --- a/src/common/sass/reset.scss +++ b/src/common/sass/reset.scss @@ -2,8 +2,8 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq margin: 0; padding: 0; border: 0; - font-size: 100%; font: inherit; + font-size: 100%; vertical-align: baseline; } diff --git a/src/common/sass/typography.scss b/src/common/sass/typography.scss index 7f99ea1c..669748d0 100644 --- a/src/common/sass/typography.scss +++ b/src/common/sass/typography.scss @@ -42,6 +42,11 @@ label { font-size: text-scale('sm'); line-height: line-height('sm'); font-family: $font-family-regular; + + a { + font-size: text-scale('sm'); + text-decoration: underline; + } } strong { @@ -52,7 +57,7 @@ a:not(.tyk-button) { cursor: pointer; color: $text-color; font-family: $font-family-regular; - + &.link--bold { font-family: $font-family-bold; } @@ -66,14 +71,6 @@ a:not(.tyk-button) { } } -p, -label { - a { - font-size: text-scale('sm'); - text-decoration: underline; - } -} - .font-family-regular { font-family: $font-family-regular; } @@ -94,18 +91,9 @@ label { } .text { - &--primary { - color: theme-color('primary', 'base'); - } - &--danger { - color: theme-color('danger', 'base'); - } &--info { color: theme-color('info', 'base'); } - &-warning { - color: theme-color('warning', 'base'); - } &--medium { font-family: $font-family-medium; } @@ -123,6 +111,25 @@ label { &--underline { text-decoration: underline; } + + &--default-light { + color: theme-color('default', 'light') !important; + } + &--default { + color: theme-color('default', 'base') !important; + } + &--primary { + color: theme-color('primary', 'base') !important; + } + &--danger { + color: theme-color('danger', 'base') !important; + } + &--success { + color: theme-color('success', 'base') !important; + } + &--warning { + color: theme-color('warning', 'base') !important; + } } td.text-ellipsis { @@ -160,24 +167,3 @@ td.text-ellipsis { margin-left: 5px; } } - -.text { - &--default-light { - color: theme-color('default', 'light') !important; - } - &--default { - color: theme-color('default', 'base') !important; - } - &--primary { - color: theme-color('primary', 'base') !important; - } - &--danger { - color: theme-color('danger', 'base') !important; - } - &--success { - color: theme-color('success', 'base') !important; - } - &--warning { - color: theme-color('warning', 'base') !important; - } -} \ No newline at end of file diff --git a/src/components/Chart/index.js b/src/components/Chart/index.js index f332c5b3..3d5aa8f8 100644 --- a/src/components/Chart/index.js +++ b/src/components/Chart/index.js @@ -1,5 +1,5 @@ import React, { - useState, useEffect, useRef, memo, + useState, useEffect, useMemo, useRef, memo, } from 'react'; import PropTypes from 'prop-types'; import * as echarts from 'echarts'; @@ -26,7 +26,7 @@ function Chart({ zoomEnd, title, seriesConfig = [], - noDataComponent = null, + noDataComponent: noDataComponentProp = null, zoomColors, style, }) { @@ -38,6 +38,17 @@ function Chart({ } }; + const noDataComponent = useMemo( + () => (noDataComponentProp + ? noDataComponentProp() + : ( + + No data to display + + )), + [noDataComponentProp], + ); + const lineBarChart = { defaultOpts: fromJS({ title: { @@ -412,16 +423,9 @@ function Chart({ ref={chartWrapperRef} /> { - /* eslint-disable-next-line no-nested-ternary */ chartHasData() ? null : noDataComponent - ? noDataComponent() - : ( - - No data to display - - ) } ); diff --git a/src/components/List/index.js b/src/components/List/index.js index f41cbfca..68eab7c4 100644 --- a/src/components/List/index.js +++ b/src/components/List/index.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { fromJS } from 'immutable'; import ListItem from './js/ListItem'; function List(props) { @@ -28,7 +27,7 @@ function List(props) { }; const getListStyle = () => { - const styleCopy = fromJS(style).toJS(); + const styleCopy = structuredClone(style); if (labelwidth) { styleCopy.flexBasis = `calc(100% - ${labelwidth} - 20px)`; } diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js index 38f6f940..a2b99e59 100644 --- a/src/components/Modal/index.js +++ b/src/components/Modal/index.js @@ -96,6 +96,9 @@ Modal.Header = ({ children }) => { ); }; +Modal.Header.propTypes = { + children: PropTypes.element, +}; /* eslint-disable-next-line */ Modal.Title = ({ children }) => { console.warn('%cModal.Title%c is deprecated.', 'font-weight: bold', ''); @@ -105,6 +108,9 @@ Modal.Title = ({ children }) => { ); }; +Modal.Title.propTypes = { + children: PropTypes.element, +}; Modal.propTypes = { children: PropTypes.oneOfType([ diff --git a/src/components/Panel/sass/Panel.scss b/src/components/Panel/sass/Panel.scss index 001939a4..5f58d7c4 100644 --- a/src/components/Panel/sass/Panel.scss +++ b/src/components/Panel/sass/Panel.scss @@ -15,18 +15,6 @@ border: $general-border-width solid theme-color('danger', 'base'); } - &__header { - align-items: center; - border-bottom: 1px solid $panel-default-border-bottom-color; - display: flex; - font-family: $font-family-regular; - - > .tyk-icon, - > .tyk-tooltip__wrapper { - margin-left: 5px; - } - } - .tyk-panel { border: $general-border-width solid theme-color('default', 'light'); box-shadow: none; @@ -57,13 +45,11 @@ .tyk-panel__header { @include panel-variant($panel-primary-header-color, $panel-primary-header-text-color); + border: $panel-primary-border-color; } .tyk-panel__body { - @include panel-variant($panel-primary-body-color, $panel-primary-body-text-color); - } - .tyk-panel__header { - border: $panel-primary-border-color; + @include panel-variant($panel-primary-body-color, $panel-primary-body-text-color); } & .tyk-form-group { @@ -121,6 +107,9 @@ } .tyk-panel__header { + display: flex; + align-items: center; + border-bottom: 1px solid $panel-default-border-bottom-color; border-radius: $panel-border-radius; border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -129,6 +118,11 @@ padding: $padding-y-panel-header $padding-x-panel-header; position: relative; + > .tyk-icon, + > .tyk-tooltip__wrapper { + margin-left: 5px; + } + .tyk-panel--collapsed & { border-bottom-left-radius: $panel-border-radius; border-bottom-right-radius: $panel-border-radius; diff --git a/src/components/Table/sass/Table.scss b/src/components/Table/sass/Table.scss index 76276403..002c3463 100644 --- a/src/components/Table/sass/Table.scss +++ b/src/components/Table/sass/Table.scss @@ -33,6 +33,7 @@ line-height: line-height('sm'); font-family: $font-family-bold; text-transform: uppercase; + padding: $table-th-padding; &:last-child { border-right: none; @@ -49,10 +50,6 @@ } } - > thead th { - padding: $table-th-padding; - } - > tbody tr:hover { background: rgba(theme-color('background', 'light'), 0.4); } @@ -67,7 +64,7 @@ &:last-child { border-right: none; } - + vertical-align: middle; &.fit { @@ -97,7 +94,7 @@ border-top: 1px solid theme-color('default', 'light'); transition: all .4s linear; border-radius: $general-border-radius; - + &.clickable { cursor: pointer; } diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js index f7b97b11..e62eee19 100644 --- a/src/components/Tabs/index.js +++ b/src/components/Tabs/index.js @@ -207,7 +207,7 @@ function Tabs(props) { const key = tempPath.shift(); - return !!(tempTabs && tempTabs[key]); + return Boolean(tempTabs?.[key]); }; const context = useMemo(() => ({ diff --git a/src/components/Tabs/js/TabContent.js b/src/components/Tabs/js/TabContent.js index 0475903e..2c9dd0e5 100644 --- a/src/components/Tabs/js/TabContent.js +++ b/src/components/Tabs/js/TabContent.js @@ -33,7 +33,7 @@ function TabContent(props) { useEffect(() => { if ( tabExists(path) && tabData?.title - && (prevTabData?.title !== tabData?.title || prevTabData.selected !== tabData.selected) + && (prevTabData?.title !== tabData?.title || prevTabData?.selected !== tabData.selected) ) { const tempTabData = { ...tabData }; updateTab(tempTabData, path); diff --git a/src/components/Toast/Toast.test.js b/src/components/Toast/Toast.test.js index 399b1e04..baee6932 100644 --- a/src/components/Toast/Toast.test.js +++ b/src/components/Toast/Toast.test.js @@ -4,7 +4,6 @@ import toast from './index'; /* eslint-disable react/destructuring-assignment */ function Component(props) { - // eslint-disable-next-line react/jsx-no-useless-fragment return props.children || ; } diff --git a/src/components/Toast/js/ToastContainer.js b/src/components/Toast/js/ToastContainer.js index b0311a63..2eaa7648 100644 --- a/src/components/Toast/js/ToastContainer.js +++ b/src/components/Toast/js/ToastContainer.js @@ -31,8 +31,9 @@ function ToastContainer(props) { const tempMessages = { ...messages }; delete tempMessages[index]; setMessages((prevMessages) => { - const { [index]: messageToBeRemoved, ...restMessages } = prevMessages; - return restMessages; + const newMessages = { ...prevMessages }; + delete newMessages[index]; + return newMessages; }); }; diff --git a/src/form/components/Combobox/index.js b/src/form/components/Combobox/index.js index 2502b9a0..87f76257 100644 --- a/src/form/components/Combobox/index.js +++ b/src/form/components/Combobox/index.js @@ -1,4 +1,4 @@ -import React, { Component, Fragment, createRef } from 'react'; +import React, { Component, createRef } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; @@ -206,15 +206,14 @@ class Combobox extends Component { tempState = { ...tempState, ...this[methodName](cursor) }; } - if (allowCustomValues && !e.key === ' ' && tags) { + if (allowCustomValues && e.key !== ' ' && tags) { tempState = { ...tempState, ...this.manageSelectedTags() }; } if ( !opened && this.inputRef.current.value - && filteredValues - && filteredValues.length + && filteredValues?.length && e.key !== 'Escape' ) { tempState = { ...tempState, ...Combobox.openList() }; @@ -407,8 +406,7 @@ class Combobox extends Component { } if ( - values - && values.length + values?.length && !Array.isArray(stateSelectedValues) && !stateSelectedValues.name ) { return values.filter((value) => value.id === stateSelectedValues.id)[0].name; @@ -465,8 +463,6 @@ class Combobox extends Component { } selectedValues = this.addSelectedValue(filteredValues[index]); } - - // tempSelectedValues = stateSelectedValues; } else { selectedValues = { stateSelectedValues: (selectedIndex === -1) ? tempSelectedValues : { id: null }, @@ -623,7 +619,7 @@ class Combobox extends Component {
  • {(max === undefined || stateSelectedValues?.length < max) && ( @@ -631,17 +627,17 @@ class Combobox extends Component { { + onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); } + this.handleItemsNavigation(e); }} onKeyUp={this.onKeyUp} - onKeyDown={this.handleItemsNavigation} - placeholder={(!stateSelectedValues || !stateSelectedValues.length) ? placeholder : ''} + placeholder={(!stateSelectedValues?.length) ? placeholder : ''} ref={this.inputRef} style={{ - width: (!stateSelectedValues || !stateSelectedValues.length) ? '100%' : `${width}px`, + width: (!stateSelectedValues?.length) ? '100%' : `${width}px`, }} /> {val} diff --git a/src/form/components/Combobox2/sass/Combobox.scss b/src/form/components/Combobox2/sass/Combobox.scss index c42fdb11..64081c50 100644 --- a/src/form/components/Combobox2/sass/Combobox.scss +++ b/src/form/components/Combobox2/sass/Combobox.scss @@ -116,7 +116,6 @@ &__text-value { font-family: $font-family-medium; font-size: text-scale('sm'); - line-height: line-height('sm'); padding: 9px 5px; width: 100%; overflow: hidden; @@ -145,6 +144,7 @@ cursor: pointer; outline: none; transition: all .2s; + color: $text-color; &--expanded { transform: rotate(180deg); @@ -168,6 +168,7 @@ &.tyk-form-group--rounded-corners { border-radius: $general-border-radius; + z-index: 1081; } .tyk-combobox2__combobox-search { @@ -217,10 +218,3 @@ } } } -.tyk-combobox2__values-container-trigger { - color: $text-color; -} - -.tyk-combobox2__combobox-dropdown.tyk-form-group--rounded-corners { - z-index: 1081; -} \ No newline at end of file diff --git a/src/form/components/DatePicker/index.js b/src/form/components/DatePicker/index.js index fd06ed62..dca73454 100644 --- a/src/form/components/DatePicker/index.js +++ b/src/form/components/DatePicker/index.js @@ -60,7 +60,7 @@ function DatePicker({ }, [prevValue, onChange, hasValueChanged]); useEffect(() => { - if (dateRef && dateRef.current && !pickerInstance) { + if (dateRef.current && !pickerInstance) { const instance = flatpickr(dateRef.current, { ...config, defaultDate: value, onChange: onDateChange, onClose, onOpen, }); @@ -72,7 +72,7 @@ function DatePicker({ pickerInstance.destroy(); } }; - }, [dateRef.current, pickerInstance]); + }, [pickerInstance]); useEffect(() => { if (pickerInstance) { @@ -136,7 +136,7 @@ function DatePicker({ let inputStyle = {}; let addonStyle = {}; - if (config && config.inline) { + if (config?.inline) { inputStyle = { height: 0, padding: 0, @@ -176,7 +176,7 @@ function DatePicker({ return ( <> { - children && children.length + children?.length ? children({ openCalendar, ref: dateRef }) : (
    diff --git a/src/form/components/Dropdown/index.js b/src/form/components/Dropdown/index.js index cf8990a3..79bab078 100644 --- a/src/form/components/Dropdown/index.js +++ b/src/form/components/Dropdown/index.js @@ -150,9 +150,7 @@ class Dropdown extends Component { customTop = top + scrollTop - dropdownHeight - 5; } - if (Dropdown.isElemInRightView(el, dropdownWidth)) { - customLeft = left; - } else { + if (!Dropdown.isElemInRightView(el, dropdownWidth)) { customLeft = left + el.clientWidth - dropdownWidth; } @@ -235,7 +233,7 @@ class Dropdown extends Component { const { btnTitle, stopButtonTextChange } = this.props; const { selectedItemProps } = this.state; - if (!stopButtonTextChange && selectedItemProps && selectedItemProps.title) { + if (!stopButtonTextChange && selectedItemProps?.title) { return selectedItemProps.title; } diff --git a/src/form/components/Dropdown/sass/Dropdown.scss b/src/form/components/Dropdown/sass/Dropdown.scss index 7d1f03e3..75479b9a 100644 --- a/src/form/components/Dropdown/sass/Dropdown.scss +++ b/src/form/components/Dropdown/sass/Dropdown.scss @@ -108,6 +108,8 @@ &:hover { color: $tyk-dropdown-item-hover-text-color; + background-color: $tyk-dropdown-item-background-hover; + text-decoration: none; } .badge { @@ -117,11 +119,6 @@ margin-top: -4px; margin-left: 6px; } - - &:hover { - background-color: $tyk-dropdown-item-background-hover; - text-decoration: none; - } } .tyk-dropdown--relative.opened { diff --git a/src/form/components/EditableList/index.js b/src/form/components/EditableList/index.js index f20227be..76f50ed4 100644 --- a/src/form/components/EditableList/index.js +++ b/src/form/components/EditableList/index.js @@ -1,4 +1,4 @@ -import React, { Component, Fragment, createRef } from 'react'; +import React, { Component, createRef } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { fromJS } from 'immutable'; @@ -352,7 +352,7 @@ class EditableList extends Component { // eslint-disable-next-line react/jsx-no-bind onChange={this.handleChildrenOnChange.bind(this, index)} config={config.children.config} - value={(value[index] && value[index].children) || []} + value={value[index]?.children || []} /> ) : null diff --git a/src/form/components/EditableList/js/EditableListForm.js b/src/form/components/EditableList/js/EditableListForm.js index 930bcd50..44f6dad1 100644 --- a/src/form/components/EditableList/js/EditableListForm.js +++ b/src/form/components/EditableList/js/EditableListForm.js @@ -168,10 +168,10 @@ class EditableListForm extends Component { } // validate each field from the form - for (let i = 0; i < validatorsNames.length; i += 1) { - const validator = props.validate[validatorsNames[i]]; + for (const validatorName of validatorsNames) { + const validator = props.validate[validatorName]; if (validator(value)) { - tempState.errors[props.name] = props.validationmessages[validatorsNames[i]]; + tempState.errors[props.name] = props.validationmessages[validatorName]; ok = false; break; } diff --git a/src/form/components/EditableList/sass/EditableList.scss b/src/form/components/EditableList/sass/EditableList.scss index 52355d8d..d90fe036 100644 --- a/src/form/components/EditableList/sass/EditableList.scss +++ b/src/form/components/EditableList/sass/EditableList.scss @@ -23,8 +23,8 @@ border-bottom-left-radius: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; - padding-bottom: 11px; - padding: map-get($spacing, 'sm') map-get($spacing, 'base') 11px map-get($spacing, 'base'); + padding-block: map-get($spacing, 'sm') 11px; + padding-inline: map-get($spacing, 'base'); } } @@ -43,11 +43,23 @@ .tyk-editable-list__header { padding-top: map-get($spacing, 'base'); - border-bottom: 1px solid theme-color('background', 'dark'); - color: $text-color; font-size: 11px; padding-bottom: map-get($spacing, 'base'); text-transform: uppercase; + background-color: white; + border-top-left-radius: $general-border-radius; + border-top-right-radius: $general-border-radius; + border: $general-border-width solid theme-color('default', 'light'); + border-bottom: 1px solid theme-color('default', 'light') !important; + color: $text-color !important; + font-family: $font-family-bold; + margin-top: map-get($spacing, 'sm'); + + & + .tyk-editable-list-items.table { + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; + } .tyk-row { margin: 0; @@ -186,20 +198,3 @@ margin-right: map-get($spacing, 'sm'); } } - -.tyk-editable-list__header { - background-color: white; - border-top-left-radius: $general-border-radius; - border-top-right-radius: $general-border-radius; - border: $general-border-width solid theme-color('default', 'light'); - border-bottom: 1px solid theme-color('default', 'light') !important; - color: $text-color !important; - font-family: $font-family-bold; - margin-top: map-get($spacing, 'sm'); - - & + .tyk-editable-list-items.table { - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; - } -} diff --git a/src/form/components/EditableList2/index.js b/src/form/components/EditableList2/index.js index 5d243eb4..88924dbe 100644 --- a/src/form/components/EditableList2/index.js +++ b/src/form/components/EditableList2/index.js @@ -27,7 +27,7 @@ function EditableList2({ hideOnEmpty = true, wrapperClassName = '', }) { - const [internalErrors, setInteranlErrors] = useState(null); + const [internalErrors, setInternalErrors] = useState(null); const updateRowValue = (rowIndex, fieldIndex, componentValue, isValid) => { const tempValueArr = !value ? [] : [...value]; @@ -47,7 +47,7 @@ function EditableList2({ const tempFieldError = [...tempErrors[rowIndex]]; tempFieldError[fieldIndex] = null; tempErrors[rowIndex] = tempFieldError; - setInteranlErrors(tempErrors); + setInternalErrors(tempErrors); } onChange(tempValueArr); }; @@ -67,7 +67,7 @@ function EditableList2({ const errors = validateValues(fields, value); if (hasErrors(errors)) { - setInteranlErrors(errors); + setInternalErrors(errors); return; } @@ -75,7 +75,7 @@ function EditableList2({ newValue.id = getUID('row'); onChange([ - ...value && value, + ...value, newValue, ]); }; diff --git a/src/form/components/EditableList2/sass/variables.scss b/src/form/components/EditableList2/sass/variables.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/src/form/components/EditableList2/validate-values.js b/src/form/components/EditableList2/validate-values.js index c2e494eb..acb79f95 100644 --- a/src/form/components/EditableList2/validate-values.js +++ b/src/form/components/EditableList2/validate-values.js @@ -1,7 +1,6 @@ const validateValues = (fields, rowValues) => (rowValues || [[undefined, undefined]])?.map( (colValue) => colValue?.map( - (value, index) => fields?.[index]?.props?.validate - && fields[index].props.validate(value), + (value, index) => fields[index].props.validate?.(value), ), ); diff --git a/src/form/components/Multiselect/js/MultiselectItem.js b/src/form/components/Multiselect/js/MultiselectItem.js index 1dc70e56..102fa314 100644 --- a/src/form/components/Multiselect/js/MultiselectItem.js +++ b/src/form/components/Multiselect/js/MultiselectItem.js @@ -28,7 +28,7 @@ function MultiselectItem({ }) { const isInSearchValue = useCallback((fieldsToSearchOn) => { if (fieldsToSearchOn?.length > 0) { - return fieldsToSearchOn.some((key) => item[key] && item[key].includes(searchValue)); + return fieldsToSearchOn.some((key) => item[key]?.includes(searchValue)); } return JSON.stringify(item).includes(searchValue); diff --git a/src/form/components/Pagination/index.js b/src/form/components/Pagination/index.js index 4ca554a7..2664a5c7 100644 --- a/src/form/components/Pagination/index.js +++ b/src/form/components/Pagination/index.js @@ -30,11 +30,7 @@ function shouldShowPage(currentNr, pageNr, totalNrOfPages) { return true; } - if ([0, 1, totalNrOfPages - 1, totalNrOfPages].includes(currentNr)) { - return true; - } - - return false; + return [0, 1, totalNrOfPages - 1, totalNrOfPages].includes(currentNr); } function getPagesArr(nrOfPages, selectedPage) { diff --git a/src/form/components/StringBuilder/index.js b/src/form/components/StringBuilder/index.js index 745c5b87..1648807c 100644 --- a/src/form/components/StringBuilder/index.js +++ b/src/form/components/StringBuilder/index.js @@ -41,7 +41,7 @@ function StringBuilder(props) { const [stringBuilderHeight, setStringBuilderHeight] = useState(); const [showOptions, setShowOptions] = useState(false); const [tokenString, setTokenString] = useState(stringToTokenString(value, options)); - const [contextMaxLength, setContentMaxLength] = useState( + const [contentMaxLength, setContentMaxLength] = useState( tokenValue.length + 5, ); const [tokens, setTokens] = useState([]); @@ -82,10 +82,10 @@ function StringBuilder(props) { useEffect(() => { // Auto Grow Input - if (contextMaxLength - 3 < tokenValue.length) { + if (contentMaxLength - 3 < tokenValue.length) { const newHeight = inputRef.current.scrollHeight + 3; setStringBuilderHeight(() => newHeight); - setContentMaxLength(() => contextMaxLength + 25); + setContentMaxLength(() => contentMaxLength + 25); } }, [tokenString, tokenValue]); @@ -183,7 +183,7 @@ function StringBuilder(props) { inputRef={inputRef} invalidTokenRegex={invalidTokenRegex} name={name} - contextMaxLength={contextMaxLength} + contentMaxLength={contentMaxLength} setContentMaxLength={setContentMaxLength} /> {filteredOptions.map((option) => (
  • handleOptionSelection(option)} > diff --git a/src/form/components/StringBuilder/js/string-builder-footer.js b/src/form/components/StringBuilder/js/string-builder-footer.js index b183b44b..dca2f140 100644 --- a/src/form/components/StringBuilder/js/string-builder-footer.js +++ b/src/form/components/StringBuilder/js/string-builder-footer.js @@ -18,7 +18,9 @@ export function StringBuilderFooter(props) {

    Enter + {' '} {dropdownTriggerKey} + {' '} to add any parameter

    diff --git a/src/form/components/StringBuilder/js/string-input.js b/src/form/components/StringBuilder/js/string-input.js index d14821d2..94d88ab4 100644 --- a/src/form/components/StringBuilder/js/string-input.js +++ b/src/form/components/StringBuilder/js/string-input.js @@ -21,7 +21,7 @@ function StringInput({ setInputInFocus, invalidTokenRegex, name, - contextMaxLength, + contentMaxLength, }) { const [isPasteEvent, setIsPasteEvent] = useState(false); @@ -257,7 +257,7 @@ function StringInput({ name={name} ref={inputRef} style={{ height: `${stringBuilderHeight}px` }} - maxLength={contextMaxLength} + maxLength={contentMaxLength} onPaste={handlePasteEvent} onFocus={handleOnFocus} onBlur={() => setInputInFocus(false)} @@ -290,7 +290,7 @@ StringInput.propTypes = { inputRef: PropTypes.instanceOf(Object), invalidTokenRegex: PropTypes.instanceOf(RegExp), name: PropTypes.string, - contextMaxLength: PropTypes.number, + contentMaxLength: PropTypes.number, }; export { StringInput }; diff --git a/src/form/components/StringBuilder/js/tokenized-string.js b/src/form/components/StringBuilder/js/tokenized-string.js index 62dfa152..8ea79f17 100644 --- a/src/form/components/StringBuilder/js/tokenized-string.js +++ b/src/form/components/StringBuilder/js/tokenized-string.js @@ -20,54 +20,50 @@ export function TokenizedString(props) { const hasDuplicates = new Set(tokens).size !== tokens.length; - const allTokens = tokens - && tokens.map((token) => { - if (options) { - const matchedOption = options.find((option) => option.id === token); - // if invalid token - if (invalidTokenRegex && !matchedOption) { - const matchedTokens = token.replaceAll(' ', '').split(invalidTokenRegex); - if (matchedTokens?.length > 1) { - return ( - - {matchedTokens.map((tkn) => { - if (tkn.match(invalidTokenRegex)) { - return ( - - ); - } - return ({`${tkn} `}); - })} - - ); - } - } - // if token matches option - - if (matchedOption) { + const allTokens = tokens?.map((token) => { + if (options) { + const matchedOption = options.find((option) => option.id === token); + // if invalid token + if (invalidTokenRegex && !matchedOption) { + const matchedTokens = token.replaceAll(' ', '').split(invalidTokenRegex); + if (matchedTokens?.length > 1) { return ( - - {matchedOption.id} + + {matchedTokens.map((tkn) => { + if (tkn.match(invalidTokenRegex)) { + return ( + + ); + } + return ({`${tkn} `}); + })} ); } } - return ( - {token} - ); - }); + // if token matches option + + if (matchedOption) { + return ( + + {matchedOption.id} + + ); + } + } + return ( + {token} + ); + }); return ( -
    +
    {allTokens}
    ); diff --git a/src/form/components/StringBuilder/sass/Stringbuilder.scss b/src/form/components/StringBuilder/sass/Stringbuilder.scss index 10cf00e3..4ca0eab2 100644 --- a/src/form/components/StringBuilder/sass/Stringbuilder.scss +++ b/src/form/components/StringBuilder/sass/Stringbuilder.scss @@ -15,9 +15,9 @@ font: inherit; display: block; z-index: 1; - width: 100%; padding: 0px; width: calc(100% - 35px); + &:focus, &:active { border: none; @@ -34,7 +34,7 @@ border: none; word-wrap: break-word; word-break: break-all; - + } .string-builder__disabled{ diff --git a/src/hooks/useComponentSize/index.js b/src/hooks/useComponentSize/index.js index 8a017f33..7379f649 100644 --- a/src/hooks/useComponentSize/index.js +++ b/src/hooks/useComponentSize/index.js @@ -15,7 +15,7 @@ const getSize = (el) => { }; const useComponentSize = (ref) => { - const [ComponentSize, setComponentSize] = useState(getSize(ref ? ref.current : {})); + const [componentSize, setComponentSize] = useState(getSize(ref ? ref.current : {})); const handleResize = useCallback(() => { if (ref.current) { setComponentSize(getSize(ref.current)); @@ -36,7 +36,7 @@ const useComponentSize = (ref) => { }; }, [ref.current]); - return ComponentSize; + return componentSize; }; /** @component */ diff --git a/src/utils/formik/index.js b/src/utils/formik/index.js index 60054e87..cc02c8f7 100644 --- a/src/utils/formik/index.js +++ b/src/utils/formik/index.js @@ -46,7 +46,7 @@ const wrapper = (Component, options) => ({ field, form, ...properties }) => { })(), []); const getValue = (v) => { - if (v && v.target) { + if (v?.target) { if (v.target.nodeName === 'INPUT' && (v.target.type === 'checkbox' || v.target.type === 'radio')) { return v.target.checked; }