Search code examples
htmlcsssvgfonts

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);
}
Solution

  • 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 */
}