File tree Expand file tree Collapse file tree 7 files changed +82
-14
lines changed
Expand file tree Collapse file tree 7 files changed +82
-14
lines changed Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Lora Variable Font Example</ title >
7+ < style >
8+ @font-face {
9+ font-family : 'Lora' ;
10+ src : url ('Lora[wght].ttf' ) format ('truetype' );
11+ font-weight : 100 900 ;
12+ }
13+
14+ body {
15+ margin : 0 ;
16+ height : 100vh ;
17+ display : flex;
18+ align-items : center;
19+ justify-content : center;
20+ background-color : # f0f0f0 ;
21+ font-family : 'Lora' , serif;
22+ }
23+
24+ h1 {
25+ font-size : 4rem ;
26+ font-variation-settings : "wght" 400 ;
27+ transition : font-variation-settings 0.1s ease;
28+ }
29+ </ style >
30+ </ head >
31+ < body >
32+ < h1 > Hello World</ h1 >
33+ < script >
34+ const h1 = document . querySelector ( 'h1' ) ;
35+ document . addEventListener ( 'mousemove' , ( event ) => {
36+ const { clientX, clientY } = event ;
37+ const { innerWidth, innerHeight } = window ;
38+
39+ // Calculate font weight based on X-coordinate
40+ const weight = Math . round ( ( clientX / innerWidth ) * 800 + 100 ) ; // Range from 100 to 900
41+ h1 . style . fontVariationSettings = `"wght" ${ weight } ` ;
42+ } ) ;
43+ </ script >
44+ </ body >
45+ </ html >
Original file line number Diff line number Diff line change 11{
2- .appVersion = "3324 ";
2+ .appVersion = "3414 ";
33DisplayStrings = (
4- "CompanyName®\012CompanyName®"
4+ Ojakula
55);
66classes = (
77{
@@ -78,7 +78,7 @@ Tag = wght;
7878);
7979}
8080);
81- date = "2024-11-05 19:19:32 +0000";
81+ date = "2025-05-17 17:42:41 +0000";
8282designer = "Olga Karpushina, Alexei Vanyashin (Cyrillic)";
8383designerURL = "https://cyreal.org";
8484familyName = Lora;
@@ -169229,16 +169229,21 @@ bar = 16.1133;
169229169229braceright = 82.0312;
169230169230bracketright = 80.0781;
169231169231eth = -7.8125;
169232- guillemetleft = -11.2305 ;
169233- guilsinglleft = -11.2305 ;
169234- hyphen = -21.9727 ;
169232+ guillemetleft = -31 ;
169233+ guilsinglleft = -31 ;
169234+ hyphen = -42 ;
169235169235idieresis = 32.2266;
169236169236igrave = 37.1094;
169237169237parenright = 73.2422;
169238169238period = -32.2266;
169239+ quotedbl = 40;
169240+ quotedblbase = -80;
169241+ quotedblright = 60;
169239169242quoteleft = 26.8555;
169240169243quoteright = 56.1523;
169241- quotesingle = 36.1328;
169244+ quotesinglbase = -80;
169245+ quotesingle = 36;
169246+ "rightanglebracket-math" = 40;
169242169247slash = -27.832;
169243169248thorn = 53.2227;
169244169249trademark = 65.918;
@@ -171167,9 +171172,20 @@ braceright = 86.9141;
171167171172bracketright = 90.8203;
171168171173eth = -6.34766;
171169171174exclam = 28.8086;
171175+ guillemetleft = -20;
171176+ guilsinglleft = -20;
171170171177idieresis = 68.8477;
171171171178parenright = 69.3359;
171172171179question = 27.3438;
171180+ quotedbl = 40;
171181+ quotedblbase = -80;
171182+ quotedblleft = 40;
171183+ quotedblright = 80;
171184+ quoteleft = 20;
171185+ quoteright = 60;
171186+ quotesinglbase = -80;
171187+ quotesingle = 40;
171188+ "rightanglebracket-math" = 40;
171173171189slash = -33.2031;
171174171190trademark = 24.4141;
171175171191};
@@ -172526,5 +172542,5 @@ tH = 79;
172526172542};
172527172543};
172528172544versionMajor = 3;
172529- versionMinor = 11 ;
172545+ versionMinor = 20 ;
172530172546}
Original file line number Diff line number Diff line change 11{
2- .appVersion = "3324 ";
2+ .appVersion = "3414 ";
33DisplayStrings = (
4- "CompanyName®\012CompanyName®\012"
4+ "/uniEFFD",
5+ "f!"
56);
67classes = (
78{
@@ -78,7 +79,7 @@ Tag = wght;
7879);
7980}
8081);
81- date = "2024-11-05 19:19:24 +0000";
82+ date = "2025-05-17 17:42:52 +0000";
8283designer = "Olga Karpushina, Alexei Vanyashin (Cyrillic)";
8384designerURL = "https://cyreal.org";
8485familyName = Lora;
@@ -168807,13 +168808,15 @@ x = -5;
168807168808"@MMK_R_d" = -5;
168808168809"@MMK_R_f" = 10;
168809168810"@MMK_R_g" = -5;
168810- "@MMK_R_guilsinglleft" = -11 ;
168811+ "@MMK_R_guilsinglleft" = -31 ;
168811168812"@MMK_R_h" = 59;
168812168813"@MMK_R_hyphen" = -10;
168813168814"@MMK_R_i" = 31;
168814168815"@MMK_R_j" = 55;
168815168816"@MMK_R_o" = -5;
168816- "@MMK_R_quoteleft" = 98;
168817+ "@MMK_R_period" = -40;
168818+ "@MMK_R_quoteleft" = 58;
168819+ "@MMK_R_quoteright" = 80;
168817168820"@MMK_R_quotesingle" = 36;
168818168821"@MMK_R_t" = 12;
168819168822"@MMK_R_y" = 12;
@@ -168826,6 +168829,7 @@ asterisk = 12;
168826168829backslash = 58;
168827168830bar = 15;
168828168831braceright = 67;
168832+ bracketleft = 20;
168829168833bracketright = 75;
168830168834eth = -11;
168831168835exclam = 12;
@@ -170635,6 +170639,7 @@ trademark = -20;
170635170639"@MMK_R_i" = 56;
170636170640"@MMK_R_j" = 8;
170637170641"@MMK_R_o" = -6;
170642+ "@MMK_R_period" = -20;
170638170643"@MMK_R_quoteleft" = 42;
170639170644"@MMK_R_quoteright" = 78;
170640170645"@MMK_R_quotesingle" = 56;
@@ -170646,12 +170651,14 @@ asterisk = 19;
170646170651backslash = 72;
170647170652bar = 39;
170648170653braceright = 89;
170654+ bracketleft = 60;
170649170655bracketright = 96;
170650170656exclam = 40;
170651170657idieresis = 63;
170652170658lslash = 53;
170653170659parenright = 66;
170654170660question = 37;
170661+ "rightanglebracket-math" = 40;
170655170662slash = -36;
170656170663trademark = 66;
170657170664v = 5;
@@ -172078,5 +172085,5 @@ tH = "40";
172078172085};
172079172086};
172080172087versionMajor = 3;
172081- versionMinor = 11 ;
172088+ versionMinor = 20 ;
172082172089}
You can’t perform that action at this time.
0 commit comments