When I went to Google fonts all they gave me were true type font files .ttf
and didn't explain at all how to use the @font-face to include them into my document. I tried the web font generator from font squirrel too, which just kept running the loading gif and not working... I then found this site -
https://transfonter.org/
I had great success using the following method:
I selected the Add Fonts button, leaving the default options, added all of my .ttf
that Google gave me for Open Sans
(which was like 10, I chose a lot of options...).
Then I selected the Convert button.
Heres the best part!
They gave me a zip file with all the font format files I selected, .ttf
, .woff
and .eot
. Inside that zip file they had a demo.html
file that I just double clicked on and it opened up a web page in my browser showing me example usages of all the different css font options, how to implement them, and what they looked like etc.
@font-face
I still didn't know at this point how to include the fonts into my stylesheet properly using @font-face
but then I noticed that this demo.html
came with it's own stylesheet in the zip as well. I opened the stylesheet and it showed how to bring in all of the fonts using @font-face
so I was able to quickly, and easily, copy paste this into my project -
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Regular.eot');
src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Light.eot');
src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Italic.eot');
src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Bold.eot');
src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
The demo.html
also had it's own inline stylesheet that was interesting to take a look at, though I am familiar with working with font weights and styles once they are included so I didn't need it much. For an example of how to implement a font style onto an html element for reference purposes you could use the following method in a similar case to mine after @font-face
has been used properly -
html, body{
margin: 0;
font-family: 'Open Sans';
}
.banner h1{
font-size: 43px;
font-weight: 700;
}
.banner p{
font-size: 24px;
font-weight: 300;
font-style: italic;
}
Embed
refers to inject the font source into the html, but not to just reference it.