Google fonts: Define custom name in CSS
This code will work in your case:
<style type="text/css">
@font-face {
font-family: 'MyCustomOpenSans';
font-style: normal;
font-weight: 400;
src:
local('Open Sans'),
local('OpenSans'),
url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),
url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
p {font-family: "MyCustomOpenSans", sans-serif;}
</style>
I'm not sure if it's a stable enough because the URL will change if there's a new update to the font and I'm not sure if Google will ban access to the other URL.
EDIT:
The WOFF format is supported by IE9+, Firefox, Chrome etc.
Source: http://caniuse.com/#feat=woff
The WOFF2 format is less supported:
http://caniuse.com/#search=woff2
Is it possible to specify custom name for a Google Font?
Yes, you can give any name you want when you define the font family in the @font-face style declaration and use that name to reference it later in the stylesheet.
@font-face
{
font-family: whateverYouWant;
src: url('example.ttf'),
url('example.eot');
... /* and so on */
}
Whatever you name the style as in the font-family property is how it will be referred to from the rest of the document. However I don't know how it competes with local font files (so if you tried to name a custom font Arial I'm not sure what you would get - the custom font or the real Arial). I don't know why you would do that anyway though.
Using custom fonts using CSS?
Generically, you can use a custom font using @font-face
in your CSS. Here's a very basic example:
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname
is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face
rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
Specifying Style and Weight for Google Fonts
They use regular CSS.
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
Now you decide what "weight" the font should have by adding
for semi-bold
font-weight:600;
for bold (700)
font-weight:bold;
for extra bold (800)
font-weight:800;
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
Pretty smart :-)
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
For CSS2
<link href='fonts.googleapis.com/css2?family=Comfortaa:wght@400;700'; rel='stylesheet' type='text/css'>
change imported font name
If you go to the url specified you'll find it's a set of @font-face rules. Just copy it; put it in a stylesheet of your own and change the names?? (Not sure about legality!)
Related Topics
Css: Skew a Buttons Border, Not the Text
How to Stop Mobile Safari from Setting Fixed Positions to Absolute on Input Focus
How to Get Multiple Borders with Rounded Corners? CSS
How to Maintain a Circlur Shape of Element with Dynamic Content
How to Select Every Other Group of Three in CSS
Why Bootstrap 3 Navbar Dropdown Doesn't Work in IE8
CSS Is Not Loaded at All in Internet Explorer (Sec7113)
How to Allow Flex-Items to Grow While Keeping the Same Size
CSS Transition on an Initially Hidden Elemement
Ie Z-Index Trouble on Element with Transparent Background
Box-Shadow Only on Left and Right
How to Get Attribute Value Using Selenium and CSS
How to Dynamically Load a CSS File into a Flex Application
React: How to Make an Input Only as Wide as the Amount of Text Provided
CSS -Moz-Available Equivalent in Webkit