Turkish characters looking unnatural

Hi all,

The Turkish special characters are showing up in our site (www.busrapirlanta.com.tr) but they are not looking like the other characters, they are a bit thinner.



Can anyone help solving this?

Cheers

[email protected] wrote:

Hi Reha,

Turkish characters use on ur site are unfortunately not supported by the font package (u use Montserrat).
Sometimes Turkish characters get crash if use text-transform:uppercase on css side.
U can use Turkish supported type fonts from https://fonts.google.com/ with try write something Turkish..

GL :)

edit: spelling.

[email protected] wrote:


Hi rehahoshanli

Your browsers should have Languages settings enabled:
Like - Internet Explorer >> Tools >> Languages >> Turkish [tr]

And it can be Meta tag related problem so you can try applying following meta tag

<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
or
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254">
<META HTTP-EQUIV="Content-language" CONTENT="tr">
or
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
<META HTTP-EQUIV="Content-language" CONTENT="tr">

Thanks Utku!

Two follow ups;
1- When I try with Google Fonts I see that Montserrat can show these characters properly.
2- How can I change the font of the website?

Cheers,
Reha

utkuyildiz9 wrote:

I know a easily way how u do.

Find ur Head.cshtml file in Presentation/Nop.Web/Themes/Theme-Name/Views/Shared.
Then add this line with ur specify font link.
Html.AddCssFileParts("https://fonts.googleapis.com/css?family=Montserrat");

and edit your font-face in your css file like
font-family: 'Montserrat', sans-serif;

GL :)

Wrong answer.
Some web fonts doesnt support Turkish characters as in this example.
Solution path is certain. Use Turkish-Supported fonts ^^

[email protected] wrote:

Thanks Utku! The file content is below and I added the last line as you suggested however when I do that I do not see any changes on the website (I tested with both Montserrat and Arbutus). Should I do something more to have the new font reflected on the website?
(I would expect to update the file that sets the current font as Montserrat instead of adding a new line)



@using Nop.Core
@using Nop.Core.Infrastructure
@using Nop.Services.Configuration
@using Nop.Services.Localization
@using Nop.Web.Framework.Themes
@{
    var supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
    
    var browser = Request.Browser;
    if (browser.Browser == "IE" && browser.MajorVersion == 9)
    {
        if (supportRtl)
        {
            Html.AppendCssFileParts("~/Themes/Uptown/Content/css/ie9-fix.rtl.css");
        }
        else
        {
            Html.AppendCssFileParts("~/Themes/Uptown/Content/css/ie9-fix.css");
        }
    }

    if ((browser.Browser == "InternetExplorer" || browser.Browser == "IE") && ((browser.MajorVersion == 10) || (browser.MajorVersion == 11)))
    {
        Html.AppendCssFileParts("~/Themes/Uptown/Content/css/ie10-11-fix.css");
    }

    if (browser.Browser == "Safari")
    {
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/safari-fix.css");
    }

  Html.AppendCssFileParts("~/Plugins/SevenSpikes.Core/Styles/perfect-scrollbar.min.css");

    if (supportRtl)
    {
        if (browser.Browser == "Safari")
        {
            Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/safari-fix.rtl.css");
        }
        
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/1280.rtl.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/980.rtl.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/768.rtl.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/480.rtl.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/mobile-only.rtl.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/tables.rtl.css");
    }
    else
    {
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/1280.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/980.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/768.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/480.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/mobile-only.css");
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/tables.css");
    }

    if (supportRtl)
    {
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/styles.rtl.css");
    }
    else
    {
        Html.AppendCssFileParts("~/Themes/Uptown/Content/CSS/styles.css");
    }

    Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/footable.js");
    Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/perfect-scrollbar.min.js");
    Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.min.js");
    Html.AddScriptParts("~/Themes/Uptown/Content/scripts/uptown.js");

    Html.AddCssFileParts("https://fonts.googleapis.com/css?family=Arbutus");

}

Hi again,
First of all, which version Nc are u using ? I checked the source of ur site. I think the NC 3.8 version, is it ?

When i look ur source of ur site, i saw <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'> how do u get this ? Did u get Html.AddCssFileParts("https://fonts.googleapis.com/css?family=Arbutus"); in Head.cshtml with my method ?

If true, u can change it and edit ur css classes.

When i look ur styles.css file in Themes/Uptown/Content/CSS/... i saw this codes

@font-face{
font-family:'Montserrat';
src:url('../fonts/Montserrat-Regular.eot');
src:url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Regular.woff') format('woff'),
url('../fonts/Montserrat-Regular.woff2') format('woff2'),
url('../fonts/Montserrat-Regular.ttf') format('truetype'),
url('../fonts/Montserrat-Regular.svg#MontserratRegular') format('svg');
font-weight:normal;
font-style:normal;}

@font-face{
font-family:'Montserrat';
src:url('../fonts/Montserrat-Bold.eot');
src:url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Bold.woff') format('woff'),
url('../fonts/Montserrat-Bold.woff2') format('woff2'),
url('../fonts/Montserrat-Bold.ttf') format('truetype'),
url('../fonts/Montserrat-Bold.svg#MontserratRegular') format('svg');
font-weight:bold;
font-style:normal;}

@font-face{
font-family:'Droid Serif';
src:url('../fonts/DroidSerif-Italic.eot');
src:url('../fonts/DroidSerif-Italic.eot?#iefix') format('embedded-opentype'),
url('../fonts/DroidSerif-Italic.woff') format('woff'),
url('../fonts/DroidSerif-Italic.woff2') format('woff2'),
url('../fonts/DroidSerif-Italic.ttf') format('truetype'),
url('../fonts/DroidSerif-Italic.svg#MontserratRegular') format('svg');
font-weight:normal;
font-style:italic;}

Indicates that the font files are imported from local.

Clear it. Just add the google font link line at Head.cshtml then edit css classes in styles.css
an example

body{font-family: 'Montserrat', sans-serif;}

GL :)

Thanks again Utku.

Correct we are using 3.80.

I had updated Head.cshtml with Montserrat also the referred part in styles.css with below:

@font-face {
   font-family: 'Montserrat';
   font-weight: normal;
   font-style: normal;
}
body{font-family: 'Montserrat', sans-serif;}

@font-face {
   font-family: 'Montserrat';
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: 'Droid Serif';
   font-weight: normal;
   font-style: italic;
}


However I still see the same issue:/ ?