How to use the computer modern font in webpages?
Using the Computer Modern font in webpages has become very easy! Just paste the following lines of CSS code in the head section of your html code in order to activate the sans-serif version of that font.
<style type="text/css">
@font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
}
@font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
font-weight: bold;
}
@font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
font-style: italic, oblique;
}
@font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
font-weight: bold;
font-style: italic, oblique;
}
body {
font-family: "Computer Modern", sans-serif;
}
</style>
Note that the solution here makes the browser load the current version of the fonts from a CTAN mirror, which can be very slow. This is okay for testing purposes, but in the long run I'd recommend you download these .otf files to your own webserver.
Adding Computer Modern Serif to Jekyll github page
After a few discussions (thanks to araxhiel) I found a way to fix the issue.
- In the
_includes/ext-css.html
file add/fonts/
instead of just fonts i.e. make the code as
<head>
<meta charset="UTF-8" />
<title>Test</title>
<!-- Computer Modern Serif-->
<link rel="stylesheet" href="/fonts/Serif/cmun-serif.css"></link>
...
</head>
- At line 13 of
assets/css/beautifuljekyll.css
file change it to
body {
font-family: 'Computer Modern Serif','Droid Sans', Helvetica, Arial, sans-serif;
And also, in the same file, add the following piece of code just before this line 13 (before body starts)
//*********************** Fonts ********************//
@font-face {
font-family: 'Computer Modern Serif';
src: url('../../fonts/Serif/cmunrm.eot');
src: url('../../fonts/Serif/cmunrm.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Serif/cmunrm.woff') format('woff'),
url('../../fonts/Serif/cmunrm.ttf') format('truetype'),
url('../../fonts/Serif/cmunrm.svg#cmunrm') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Computer Modern Serif';
src: url('../../fonts/Serif/cmunbx.eot');
src: url('../../fonts/Serif/cmunbx.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Serif/cmunbx.woff') format('woff'),
url('../../fonts/Serif/cmunbx.ttf') format('truetype'),
url('../../fonts/Serif/cmunbx.svg#cmunbx') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Computer Modern Serif';
src: url('../../fonts/Serif/cmunti.eot');
src: url('../../fonts/Serif/cmunti.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Serif/cmunti.woff') format('woff'),
url('../../fonts/Serif/cmunti.ttf') format('truetype'),
url('../../fonts/Serif/cmunti.svg#cmunti') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Computer Modern Serif';
src: url('../../fonts/Serif/cmunbi.eot');
src: url('../../fonts/Serif/cmunbi.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Serif/cmunbi.woff') format('woff'),
url('../../fonts/Serif/cmunbi.ttf') format('truetype'),
url('../../fonts/Serif/cmunbi.svg#cmunbi') format('svg');
font-weight: bold;
font-style: italic;
}
- Along with the above two code additions, if you follow the steps in the question, which only leaves adding the
fonts/Serif
folder onto the main repo from the link, you are good to go!!
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).
Embed font in webpage
In order for the embedded font feature to work (in browsers supporting it) you've also got to apply the new font-family to a style selector.
For instance
h1 {
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
}
won't do the trick, even though it will indeed load a font (if it's a valid URL) -- because all we've done is load the font. We still need to actually apply it, so
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
h1 {
font-family: CustomFont;
}
both loads the custom font and applies it to your CSS selector (in this example, h1).
You'll almost certainly want to read a tutorial about @font-face (Krule has already suggested a good one above with links to free fonts which can be used with it.) Ditto to all the warnings above about graceful degeneration, as this is still not a universally supported feature.
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 do I install a custom font on an HTML site
Yes, you can use the CSS feature named @font-face.
It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.
You declare it in the CSS like this:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
Then, you can just reference it like the other standard fonts:
h3 { font-family: Delicious, sans-serif; }
So, in this case,
<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>
And you just need to put the JUNEBUG.TFF in the same location as the html file.
I downloaded the font from the dafont.com website:
http://www.dafont.com/junebug.font
Related Topics
CSS Pointer-Events and Appearance Properties Not Recognized by CSS Validator
What's the Difference Between Padding and Margin
Scss/Sass Multiple Sites in Multiple Directories
Special Characters in CSS Selectors
How to Get CSS Variables Working in Chrome 34
Prefer Shrinking Over Growing in a Flex Container with Flex-Flow: Row Wrap
CSS Display:None and Visibility:Hidden
Cannot Change the Content of Visited :Before Pseudo-Elements
Pure CSS: Center Tooltip Above Text on Hover Pt. 2
Nightwatch Cannot Find/Click on Dropdown Option
A:Visited Links - Opacity Not Working
Equal Height Bootstrap Cards Within Slick Carousel
Css3 Image Crossfade (No JavaScript)
Is There a Specific Order for CSS Properties