To use local font in HTML using font face
I made the following changes and I got the result
- Quotation marks for font-family
- Using of URL instead of local
- Changing of "\" to "/"
Note:
Use of the local
css function throws an error in the developer console saying resource is not loaded. See the modified code below.
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "myFirstFont";
src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");
}
.harlow {
font-family: "myFirstFont";
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
How could I use local fonts in website
Paste all these font formates in your css folder otf/ttf/woff.
Add in your stylesheet:-
@font-face {
font-family: 'MTCORSVA';
src: url('./MTCORSVA.eot');
src: local('MTCORSVA'), url('./MTCORSVA.woff') format('woff'), url('./MTCORSVA.ttf') format('truetype');
}
now use this to apply font family font-family: 'MTCORSVA';
@font-face src: local - How to use the local font if the user already has it?
If you want to check for local files first do:
@font-face {
font-family: 'Green Sans Web';
src:
local('Green Web'),
local('GreenWeb-Regular'),
url('GreenWeb.ttf');
}
There is a more elaborate description of what to do here.
font-face for local fonts
Your update is still wrong. You need the following:
@font-face {
font-family: 'myOwnFontSet';
src: local('Verdana'), local('Arial'), local(sans-serif); }
How to add some non-standard font to a website?
This could be done via CSS:
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).
Related Topics
How to Save a File from a Website as PDF
Responsive Image Align Center Bootstrap 3
How to Tidy Up an HTML File's Indentation in Vi
How to Insert Spaces/Tabs in Text Using HTML/Css
What Does the Clearfix Class Do in CSS
How to Calculate Required Hue-Rotate to Generate Specific Colour
Remove ':Hover' CSS Behavior from Element
How to Strike Through Obliquely with CSS
How to Set the Thumbnail Image on HTML5 Video
Bash Script to Convert from HTML Entities to Characters
Vertically Centering a Div in Body
Making a Custom Input Text Type
How to Add a Background Image on Top of a Previous Background Image
Why Is There Vertical Scroll on the Main Container
Change Checkbox Check Image to Custom Image