CODEWITHSUNDEEP
cssfontsfont-face
DEV
DEV

Reputation: 667

Why are my fonts not changing?

@font-face {
font-family: 'Snell Roundhand Script';
src: url('../fonts/snell-roundhand-script.eot');
src: url('../fonts/snell-roundhand-script.eot?#iefix') format('embedded-opentype'), url('../fonts/snell-roundhand-script.woff') format('woff'), url('../fonts/snell-roundhand-script.ttf') format('truetype'), url('../fonts/snell-roundhand-script.svg#Snell Roundhand Script') format('svg');
}
@font-face {
font-family: 'Baskerville Old Face';
src: url('../fonts/ufonts.com_baskerville-old-face.eot');
src: url('../fonts/ufonts.com_baskerville-old-face.eot?#iefix') format('embedded-opentype'), url('../fonts/ufonts.com_baskerville-old-face.woff') format('woff'), url('../fonts/ufonts.com_baskerville-old-face.ttf') format('truetype'), url('../fonts/ufonts.com_baskerville-old-face.svg#Baskerville Old Face') format('svg');
}

The above code is the font-face code

And below i am poting the css i have added:

.big-red-text{
color: #ff0000;
font-family: Snell Roundhand Script;
font-size: 50px;
text-align: center;
}

.big-orange-text{
color: #ff6600;
text-align: center;
font-weight: 600;
font-family: Baskerville Old Face;

}

Is there something missing in this? For it not to take the font into consideration? All the fonts are stored in the font folder in the root directory.

Upvotes: 0

Views: 5417

Answers (3)

Chetwynd
Chetwynd

Reputation: 13

Did you purchase the font or font-family?

Url:https://www.fonts.com/font/linotype/snell-roundhand

The support team at fonts.com should be able to resolve your issue.

Upvotes: 0

Wavemaster
Wavemaster

Reputation: 1824

If your font name contains spaces, you have to enclosure it in single quotes. Without spaces in the name you can lose the single quotes but I suggest to always use them to avoid mistakes.

So as Fundhor suggests it will work with 

font-family: 'Snell Roundhand Script';

and 

font-family: 'Baskerville Old Face';

Make sure your files are in the right place:

- css
-- fonts.css <-- here you are declaring your @font-face
- fonts
-- snell-roundhand-script.eot
-- etc...

Additionally include your fonts.css before you are using the font-family

Upvotes: 2

Fundhor
Fundhor

Reputation: 3577

Try with this :

.big-red-text{
    color: #ff0000;
    font-family: 'Snell Roundhand Script';
    font-size: 50px;
    text-align: center;
}

Upvotes: 0

Related Questions