CODEWITHSUNDEEP
htmlcsssvgfonts
Sahand
Sahand

Reputation: 8360

How to use outside fonts in CSS

I have downloaded a folder full of svg and otf-files. They contain a font that I would like to use in my html-document. Here's what the folder looks like:

fonts-folder contains all of the different files.

First question:

Which of the files should I use? I understand that "process.svg" and "process-yellow.svg" probably have different colors, BUT, when we have one "process-yellow.svg" and one "process-yellow.otf", which one should I use?

Second question:

How do I use the font in my HTML document? So far I've tried this:

In the html16.html style-element:

<style type="text/css">
        @font-face {
            font-family:'Process';
            src: url('/fonts/process.svg#process') format('svg');
        }

        p.text1 {
            width: 140px;
            border: 1px solid black;
            word-break: keep-all;
            font-family: 'Process';
        }
</style>

In the html16.html body-element:

<body>
    <b>word-break:keep-all</b>
    <p class="text1">Tutorials Point originated from the idea that there exists-a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>

</body>

But it doesn't do anything to the font. It just looks like it would look without me changing the font.

EDIT: It should be added that importing woff-fonts works for me, like I did here:

@font-face {
    font-family:Process;
    src: url(https://www.tutorialspoint.com/css/font/SansationLight.woff);
}

Upvotes: -1

Views: 1994

Answers (4)

Diggi
Diggi

Reputation: 1

For me what worked was the following:

<style>
    @font-face {
        font-family: 'Titilum';
        src: url('fonts/Titillium_Web/TitilliumWeb-Bold.ttf') format('truetype');
    }


    .pftop {
        font-family: Titilum;
        text-align: center;
    }
</style>

Upvotes: 0

Leah
Leah

Reputation: 346

Try This - Import like so,

@import url('https://fonts.googleapis.com/css?family=El+Messiri');

Then use:

font-family: 'El Messiri', sans-serif;

Upvotes: 0

Shailesh Daund
Shailesh Daund

Reputation: 180

If web embedding is allowed. You can generate other font type files from here, which works for the older browsers.

@font-face {
    font-family: 'Process';
    src: url('/fonts/process.eot') format('embedded-opentype'); /* IE9 Compat Modes */
    src: url('/fonts/process.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/process.woff') format('woff'), /* Modern Browsers */
         url('/fonts/process.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/process.svg#process') format('svg'); /* Legacy iOS */
}

Upvotes: 3

xxCodexx
xxCodexx

Reputation: 438

This should work. Please check with below syntax.

@font-face {
   font-family: novalight;
   src: url('/static/src/fonts/novalight.otf');
}

.proximanovalight {
   font-family : novalight, sans-serif;
}

Upvotes: 0

Related Questions