Custom Google Fonts

6 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.78
List Price:  €129.90
You save:  €37.11
£79.40
List Price:  £111.16
You save:  £31.76
CA$136.11
List Price:  CA$190.56
You save:  CA$54.44
A$154.13
List Price:  A$215.78
You save:  A$61.65
S$135.08
List Price:  S$189.12
You save:  S$54.03
HK$782.28
List Price:  HK$1,095.23
You save:  HK$312.94
CHF 90.61
List Price:  CHF 126.85
You save:  CHF 36.24
NOK kr1,085.23
List Price:  NOK kr1,519.37
You save:  NOK kr434.13
DKK kr692.01
List Price:  DKK kr968.84
You save:  DKK kr276.83
NZ$167.80
List Price:  NZ$234.94
You save:  NZ$67.13
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳10,976.08
List Price:  ৳15,366.96
You save:  ৳4,390.87
₹8,339.52
List Price:  ₹11,675.66
You save:  ₹3,336.14
RM473.25
List Price:  RM662.57
You save:  RM189.32
₦141,842.81
List Price:  ₦198,585.61
You save:  ₦56,742.80
₨27,810.04
List Price:  ₨38,935.18
You save:  ₨11,125.13
฿3,647.70
List Price:  ฿5,106.92
You save:  ฿1,459.22
₺3,232.12
List Price:  ₺4,525.11
You save:  ₺1,292.98
B$499.21
List Price:  B$698.91
You save:  B$199.70
R1,908.54
List Price:  R2,672.04
You save:  R763.49
Лв180.65
List Price:  Лв252.92
You save:  Лв72.26
₩135,197.71
List Price:  ₩189,282.20
You save:  ₩54,084.49
₪368.63
List Price:  ₪516.10
You save:  ₪147.47
₱5,633.91
List Price:  ₱7,887.71
You save:  ₱2,253.79
¥15,144.47
List Price:  ¥21,202.86
You save:  ¥6,058.39
MX$1,659.40
List Price:  MX$2,323.22
You save:  MX$663.82
QR364.31
List Price:  QR510.04
You save:  QR145.73
P1,370.91
List Price:  P1,919.33
You save:  P548.42
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,729.52
List Price:  E£6,621.52
You save:  E£1,892
ብር5,680.63
List Price:  ብር7,953.11
You save:  ብር2,272.48
Kz83,612.74
List Price:  Kz117,061.18
You save:  Kz33,448.44
CLP$97,978.20
List Price:  CLP$137,173.40
You save:  CLP$39,195.20
CN¥722.95
List Price:  CN¥1,012.16
You save:  CN¥289.21
RD$5,921.50
List Price:  RD$8,290.34
You save:  RD$2,368.83
DA13,490.83
List Price:  DA18,887.70
You save:  DA5,396.87
FJ$226.12
List Price:  FJ$316.58
You save:  FJ$90.46
Q779.86
List Price:  Q1,091.83
You save:  Q311.97
GY$20,923.51
List Price:  GY$29,293.76
You save:  GY$8,370.24
ISK kr13,946.60
List Price:  ISK kr19,525.80
You save:  ISK kr5,579.20
DH1,013.19
List Price:  DH1,418.51
You save:  DH405.32
L1,763.34
List Price:  L2,468.75
You save:  L705.40
ден5,702.11
List Price:  ден7,983.18
You save:  ден2,281.07
MOP$805.89
List Price:  MOP$1,128.28
You save:  MOP$322.39
N$1,893.44
List Price:  N$2,650.90
You save:  N$757.45
C$3,681.15
List Price:  C$5,153.75
You save:  C$1,472.60
रु13,335.63
List Price:  रु18,670.42
You save:  रु5,334.78
S/370.84
List Price:  S/519.19
You save:  S/148.35
K382.72
List Price:  K535.82
You save:  K153.10
SAR375
List Price:  SAR525.01
You save:  SAR150.01
ZK2,522.76
List Price:  ZK3,531.96
You save:  ZK1,009.20
L461.43
List Price:  L646.02
You save:  L184.59
Kč2,350.75
List Price:  Kč3,291.15
You save:  Kč940.39
Ft36,729.02
List Price:  Ft51,422.10
You save:  Ft14,693.08
SEK kr1,071.30
List Price:  SEK kr1,499.86
You save:  SEK kr428.56
ARS$85,766.82
List Price:  ARS$120,076.98
You save:  ARS$34,310.16
Bs691.04
List Price:  Bs967.48
You save:  Bs276.44
COP$387,583.68
List Price:  COP$542,632.66
You save:  COP$155,048.97
₡50,832.34
List Price:  ₡71,167.31
You save:  ₡20,334.97
L2,468.78
List Price:  L3,456.40
You save:  L987.61
₲737,805.73
List Price:  ₲1,032,957.54
You save:  ₲295,151.80
$U3,781.90
List Price:  $U5,294.82
You save:  $U1,512.91
zł400.73
List Price:  zł561.05
You save:  zł160.31
Already have an account? Log In

Transcript

Alright, so now as I said, we're going to add a custom Google Font locally to the project. The reason being that we want this to cache and function offline in our pw A. So to start with, we're going to go find a Google Font. So we're going to go fonts dot google COMM And you can see that there's a wide variety of fonts here. And what I like to do is we can actually hover over one and instead of a sentence, we can click custom. And then we can put in whatever our title is going to be.

And then we can click down here apply to all fonts. And so now you can see what your title would look like in every font at a glance. This is, in my opinion, the best way to find a appropriate font for the title you're using. And so I already know which font I would like so I'm just going to search it. And so you can choose as many fonts as you want. And then eventually, you're going to use this plus button to select it.

So we have one family selected, we're going to open that up, and we're going to download this selection. So this is going to download as a zip file. And we're going to show this folder, and Ctrl x. And if we all tab down, we can actually go back into our assets folder that we previously had. And we're going to paste that in here. Right click, extract all and we're going to extract it all into this folder.

And you can see we have the font file here. So we're going to Ctrl C. And we're going to actually put this into our assets folder again, just like we did with our image. And we're going to have this font folder here that we're going to create. I had created it previously and we're going to copy In this, we're also just going to rename it something a little simpler. So Alex, stash brush. And All right, cool.

Now we're going to go into our CSS. And we're going to organize that a little bit first. So first, actually, let's organize this, let's just have some space is kind of between here. And this is kind of a separate thing. So we'll just leave space for that. And in here as well.

Actually, we need to kind of shift stuff over and we're going to separate this. So this is for our main title. And this stuff is for our video. Alright, so We're going to now use an import statement in our CSS to import our custom font. So we're going to do at font dash face, you can see that it comes up there already. And curly brackets, font family, again, autocomplete.

And then we're going to type in the custom name that we made. Brush, semi colon. And then we're going to have a SRC source. And we're going to make it a URL bracket. Again, we're going to use dot dot slash to go up to our assets folder, our font folder and Alex. Brush font.

And then we're going to need to change this from Helvetica to Alex stash brush, and we're going to comma and then add sans serif just in case it doesn't load. Alright, so we can go back and Check that out. Close this for now. All right, so we have our title here, we could probably stand to make that a little bit bigger. And we actually probably want to center it vertically and horizontally as well. So we're gonna go back to our code, we'll increase the font size to five REM instead of three.

And then in order to center it, we're actually going to modify our home ID properties. So we're going to go hashtag home to target our home ID. And we're going to start by adding actually a background color of black. So a black background will happen before our video if it doesn't load correctly. And then we're going to use Flexbox. We're going to initialize that with display, flex.

And then we're going to align items, center and This is for centering vertically. And then we're going to use justify content center and this will align everything horizontally. Okay, so we can Alt Tab back to our project. And yeah, that's looking a little bit better, but maybe that top is a little bit too much now. So let's give that a top of 30% instead. Okay, that's in the center.

Looking looking pretty great if I do say so myself. So, that's it for now. And in the next one, we're going to import our Font Awesome icons so that we can have our little social social media links down here below our title. Alright, so I'll see you in that one. Bye for now.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.