I do not know what is wrong in your case, but I will show how I can download fonts, I hope this helps.
First: use the font you want to use, if you don’t have one, google fonts are a great place to view and download some fonts.
Second: go to the site (fontsquirrel) and go to the generator, check the expert option to make some changes to your download, check the two options: EOT Lite and SVG in the section: Font formats:, omit and check the Agreement: option, then download the font .
Third: after a few seconds, and when your font is ready to work, extract the content into one file, it will look like this:
- Specimen_files
- stylesheet.css
- Generator Configurations
- Font-you-download.eot
- Font-you-download.woff
- Font-you-download.woff2
- Demonstration of the font you downloaded in HTML
- Font-you-download.svg
- Download the font (the one you install on your device)
Now, delete these files if you want,
- generator configuration
- specimen_files
- demonstration of a font loaded in HTML
Five: copy and paste the file containing all the files uploaded to the squirrel font in your project,
In Stylesheet.css, it will look something like this:
@font-face { font-family: 'open_sanslight_italic'; src: url('opensans-lightitalic-webfont.eot'); src: url('opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('opensans-lightitalic-webfont.woff2') format('woff2'), url('opensans-lightitalic-webfont.woff') format('woff'), url('opensans-lightitalic-webfont.svg#open_sanslight_italic') format('svg'); font-weight: normal; font-style: normal; }
Six: Here is the file map of my example archive to understand:
-project-2017
----- Fonts
---------- A file that has all the files (the one from which you took some files)
----- Imgs
---------- All images on the site
----- Js
---------- js.js
----- Styles
---------- Styles.css
----- Index.html
Seven: Put your location of the font files, for example, this code below, following the map above:
@font-face { font-family: 'open_sanslight_italic'; src: url('../fonts/opensans-light/opensans-lightitalic-webfont.eot'); src: url('../fonts/opensans-light/opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-light/opensans-lightitalic-webfont.woff2') format('woff2'), url('../fonts/opensans-light/opensans-lightitalic-webfont.woff') format('woff'), url('../fonts/opensans-light/opensans-lightitalic-webfont.svg#open_sanslight_italic') format('svg'); font-weight: normal; font-style: normal;
}
Now URL explanation:
({"../"} to go to this estruture :),
----- Fonts
---------- A file that has all the files (the one from which you took some files)
----- Imgs
---------- All images on the site
----- Js
---------- js.js
----- Styles
---------- Styles.css
----- Index.html
({"fonts"} to search for font files)
({"opensans-light"} is the file that I downloaded for example, inside it there are all the files that you downloaded in font-squirrel);
At this point, you have the font installed, but then you asked me: how did I put it in HTML ?, you have 2 options for using the font, one of which copies the font-familly line, as in my example:
font-family: 'open_sanslight_italic';
And setting in class like:
.opn-itc{ font-family: 'open_sanslight_italic'; } **Or** body{ font-family: 'open_sanslight_italic'; }
After all this lesson, you will be able to select a font, change the font, put it in css and call it as a class to place it anywhere.
Sorry if this lesson turned out to be a little long or complicated, at first I also thought that the dog sucks manga, but just repeat this process several times, and you start thinking without thinking automatically if you need me to help.