welcome and welcome today we are going to see how to load retro fonts
what happens is that this type of sources that are retro sources have a
feature that is an image for load this type of font we try
create this image in which we with a configuration that we are going to
tell facer let's say this is a zero this 1 on 2 and he will know
where to cut and how to use these sources which is an image are called beat mat
fons and how do we get this picture worth we can do it through photoshop or
we can use a tool that I have developed that is called ttf to png
gas point that will be in the description the link on this page and it's easy to
use here the name of the source that let's put range for example in
lowercase here you can put any name this name it is important that
which will be the key of our source here in lederer letters like here
we have to put the alphabet that let's use and here are only the
capital letters and there's the ñ lmn we're going to put the n
capital letter and it would be that more has with the
character by columns sorry for rows we will leave it as is
the color let's leave it black for now and
let's go here we could import the sources that we want that would be
a source of tea efe if here they are fixed here are the metadata outputs that
is what we are going to use this we are going to copy
if they want to do it if I'm not going to see you will see that when we create the source
will leave a file with all this so let's use the sources that I left
by default that would be this kind of source so I go down and I give to
create font will not ask where to save it
we will give to save and download ballack and mozilla does not come out
warning do not pay attention we give to open and here are the sources of this
we're going to put it on the desk we hope it will be compressed and it would be
let's close this browser and here if you look at the sources
this is the text that is in pereje important you have to do it mozilla
because cron let blues get weird and here it is the file and Jason with the information
previous of all this text ok let's create our project with
windows rsm of venues of this and a peje
retro funds retro and fisher auto the size of width
would be 500 the high 300 true and photos ok we have installed this what
we can close here we have a folder retro background let's open here we have
the assets and we're going to put these two archives in assets
ok now let's put this folder of retro fans inside visual code
and we are going to start our project with life server
to be loaded and we're going to accommodate it
inside that rs and I'm going to see let's eliminate the image that we already have
loaded we will load our source let's remember that it's inside the etts
and it's called gamma fp jason gamma points lace and are sorry and gamma point png
and what are we going to put this love and more and let's put range and here would be the url
is already the sre posts and that is range png for the plaster
let's touch this which is similar in place of match jason
here Jason and here he made you well nothing is going to happen and we are going to
start loading our ours was our vital source to start we're going
to create a variable that will be called config that will contain our jason
descache jason
point get and the name we've given him that was
range well low jason for now for can add the source to load the
image and the jason and convert that font in life in a big band font since with
dries a cut the image nor can we get that text so let's move
this and here we are going to write says cache
because we're going to put the cache matt font and here we are going to put at
the first parameter is valid here would be here that would be gamma and the
second an object of facer that is for converting the config into a bit kills like this
let's write facer projects point retro font point parce and
here inside you have to pass this and the conflict with fix would be this here
OK now we would have the source available
to be able to use it and so let's use You gave it to be equal
matt signs text and here we are going to put the x the y and here that would be gamma and the text
that we want to read in the value 0 ok here an error happens because because if
we remember when we created it not we have defined the lowercase but not
it happens nothing else to capitalize and here is zero value we have not either
defined these parameters but neither nothing happens
so it will give you zero value Ok now if we want to change the text
let's put the day we have text point text we can
reassign the text we're going to put the value instead of 0 let's go
increasing 1 but first let's create here in create this value will be the same
to 0 disvalue + +
and let's add and here it is
we can also change the color of the source even if it's a picture we can
do it concept int important this only works with a web
that ellen with the configuration so 0 x efe efe 00 00
is the background is black or the image is that we have loaded that we have loaded is
in black and will not be able to dye the image so let's keep it
and here we said that a ñ and instead of white black we're going to
generate the source
save
we put on the desk
let's put this name in assets it matters so much the name of the source is
you can put any name and so instead of gamma let's put here
border font and let's see what happened we go to our
mozilla and here if you fix it already changed the color if the source of the
font can be dyed if it is black Well, no
let's change the dye we're going to put other color
and they are fixed adapts Well, it was all for this video
subscribe and see you in the next
No comments:
Post a Comment