LAST UPDATED: JUNE 9, 2021
CSS font-language-override property
The font-language-override property in CSS is identified for controlling the language use of specific glyphs in a typeface. By default, the language attribute of HTML tells browsers to display the glyphs that are designed specifically for that particular language. This property lets you to override the typeface behaviour for a particular language. The font-language-override property is specified as any of the keywords like normal or string.
The syntax for the font-language-override property in CSS
normal | <string>
The syntax for the font-language-override property in CSS for the string values
font-language-override: "ENG";
font-language-override: "TRK";
CSS font-language-override property example
Here in this example, we are using the font-language-override property with different border styles, colors and their different values. In this case, we have given the font-language-override property value as normal and danish. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc.
<!DOCTYPE html>
<html>
<head>
<title>The font-language-override property in CSS</title>
<style type="text/css">
p.para1 {
font-language-override: normal;
color: deeppink;
}
p.para2 {
font-language-override: "DAN";
color: green;
}
</style>
</head>
<body>
<p class="para1">Default language setting.</p>
<p class="para2">This is a string with the <code>font-language-override</code> set to Danish.</p>
</body>
</html>
Output
Another example of the font-language-override property in CSS
Here in the example below, we are using the font-language-override property with different border styles, colors and their different values. In this case, we have given the font-language-override property value as Turkish and English. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc. The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc
<!DOCTYPE html>
<html>
<head>
<title>The font-language-override property in CSS</title>
<style type="text/css">
p.para1 {
font-language-override:"TRK";
color: deeppink;
}
p.para2 {
font-language-override: "ENG";
color: green;
}
</style>
</head>
<body>
<p class="para1">Turkish language setting.</p>
<p class="para2">This is a string with the <code>font-language-override</code> set to English.</p>
</body>
</html>
Output
Live example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
no |
no |
| Edge |
no |
no |
| Firefox |
34 |
34 |
| Internet Explorer |
no |
no |
| Opera |
no |
no |
| Safari |
no |
no |
| Webview Android |
no |
no |
| Chrome Android |
no |
no |
| Firefox Android |
34 |
34 |
| Opera Android |
no |
no |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
The initial value for the font-language-override property in CSS is 'normal'. This property is applicable to all elements. It is also applicable to the '::first-letter' and '::first-line'. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is 'discrete'
